RN的 Button 组件没有 style 属性

在 React Native (RN) 中，Button 组件确实没有直接的 style 属性，这与一些其他的 React Native 组件（如 View 或 Text）有所不同。React Native 的 Button 组件是一个较为高级的封装，它提供了一些基本的样式和行为，但样式方面的自定义能力相对有限。

自定义 Button 样式

如果你需要高度自定义按钮的样式，你可以使用 TouchableOpacity 或 TouchableHighlight 组件来替代 Button，并在这些组件内部使用 Text 或其他元素来呈现按钮的标签。这样做可以让你完全控制按钮的样式。

示例代码

以下是一个使用 TouchableOpacity 创建自定义按钮样式的示例：

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';const CustomButton = ({ onPress, title }) => (<TouchableOpacity onPress={onPress} style={styles.button}><Text style={styles.buttonText}>{title}</Text></TouchableOpacity>
);const styles = StyleSheet.create({button: {backgroundColor: '#007BFF',padding: 10,borderRadius: 5,alignItems: 'center',justifyContent: 'center',},buttonText: {color: '#FFFFFF',fontSize: 16,},
});export default CustomButton;

在这个示例中，我们创建了一个名为 CustomButton 的组件，它接受 onPress 和 title 作为属性。按钮的样式通过 StyleSheet.create 方法定义，这使得样式更加模块化和易于管理。

使用 Button 组件

虽然 Button 组件的样式定制能力有限，但如果你不需要复杂的样式，它仍然是一个方便的选择。你可以通过 title 属性设置按钮的文本，通过 onPress 属性设置点击事件的处理函数，以及通过 color 属性设置按钮的背景色（仅适用于 Android，iOS 上 Button 的背景色由系统控制）。

示例代码

import React from 'react';
import { Button, View, StyleSheet } from 'react-native';const App = () => (<View style={styles.container}><Buttontitle="Press Me"color="#007BFF" // 仅在 Android 上有效onPress={() => alert('Button pressed!')}/></View>
);const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},
});export default App;

在这个示例中，我们使用了 React Native 的 Button 组件，并通过 color 属性尝试改变按钮的背景色（注意，这个属性在 iOS 上可能不起作用）。

总之，虽然 Button 组件没有直接的 style 属性，但你可以通过其他方式实现高度自定义的按钮样式。