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() 方法。 样式对象可以包含字体、颜色和背景颜色的属性。
