React Native 按鈕存在一個難以查看和理解的問題。 在 React Native 中創建按鈕時，您可以選擇創建圓形或方形按鈕。 但是，當您在應用程序中使用這些按鈕時，可能很難分辨哪個是圓形哪個是方形。 當您嘗試使用應用程序中的按鈕時，這可能會導致混亂和問題。
border
import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.container}> <TouchableOpacity style={styles.button}> <Text style={styles.text}>Click Me</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { backgroundColor:'#4ba37b', width:100, borderRadius:50, alignItems:'center', paddingTop:14 }, text:{ color:'#fff', fontSize:16 } });
此代碼是用 React Native 編寫的，並創建了一個顯示“單擊我”的按鈕。 當按鈕被點擊時，一個動作被執行。
第一行導入 React 和 React Native 庫。
第二行創建一個名為 App 的組件。 該組件將呈現一個按鈕。
第三行渲染 App 組件。 App 組件包含一個 TouchableOpacity 元素，它將呈現為一個按鈕。 該按鈕的樣式為 styles.button，定義在第四行。 按鈕的文本將具有樣式 styles.text，它在第五行中定義。
第六行和第七行分別定義容器元素和按鈕元素的樣式。 容器元素會將 justifyContent 和 alignItems 設置為“center”，這樣按鈕就會在屏幕上居中。 按鈕元素的背景顏色為“#4ba37b”，寬度為 100 像素。 它還將 borderRadius 設置為 50，因此它顯示為圓形而不是矩形。 最後，它將 alignItems 設置為“center”，以便其中的文本垂直和水平居中。
在 React 中設置按鈕
React Native 中有幾種不同類型的按鈕：
按
文本輸入
單選按鈕
複選框
如何給按鈕樣式
有幾種方法可以為 React Native 中的按鈕提供樣式。
一種方法是使用 StyleSheet 組件。 您可以將樣式對像作為第二個參數傳遞給 StyleSheet 組件的 create() 方法。 樣式對象可以包含字體、顏色和背景顏色的屬性。
另一種方法是使用 Button 組件。 您可以將樣式對像作為第二個參數傳遞給 Button 組件的 create() 方法。 樣式對象可以包含字體、顏色和背景顏色的屬性。
