React Native中如何修改Button组件的文字颜色？

问题原因 #

React Native官方Button组件的样式定制能力非常有限：

• 它不支持style属性，你写的style={{ fontColor:"red" }}完全无效；
• 即使支持样式，文字颜色的正确属性是color，而非fontColor；
• 官方Button的color属性跨平台表现不一致：Android中控制按钮背景色，文字颜色由系统自动适配；iOS中控制按钮文字颜色，背景为透明。

解决方案 #

1. 自定义按钮（推荐，完全可控）

用TouchableOpacity（或Pressable）配合Text组件实现自定义按钮，能完全控制背景色和文字颜色：

import { TouchableOpacity, Text, StyleSheet } from 'react-native';

// 组件内使用
<TouchableOpacity 
  style={styles.yellowButton}
  onPress={() => regiao()}
>
  <Text style={styles.redButtonText}>Entrar</Text>
</TouchableOpacity>

// 样式定义
const styles = StyleSheet.create({
  yellowButton: {
    backgroundColor: '#F0C228',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 6,
  },
  redButtonText: {
    color: 'red',
    fontSize: 16,
    fontWeight: '500',
    textAlign: 'center',
  },
});

2. 坚持用官方Button（仅单平台可控）

• iOS平台：直接将color设为红色，文字就会变成红色：

  <Button color="red" onPress={() => regiao()} title="Entrar"></Button>
  

• Android平台：官方Button无法直接修改文字颜色，只能通过调整App主题或改用自定义按钮解决。

内容的提问来源于stack exchange，提问作者Diego Alves