React Native按钮颜色无法修改：设置backgroundColor后仍显蓝色求助

React Native自带的<Button>组件是跨平台的原生封装，它的样式受系统原生控件限制，无法通过style属性直接修改背景色，这就是你设置backgroundColor: 'black'却没效果、按钮始终显示蓝色的原因。

这里给你两种可行的解决方法：

方法一：自定义按钮（推荐，样式完全可控） #

用TouchableOpacity（Android端也可以用TouchableNativeFeedback）配合Text组件自定义按钮，能完全掌控样式：

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

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

// 样式定义
const styles = StyleSheet.create({
  customBtn: {
    backgroundColor: 'black',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 6,
    // 还可以添加阴影、边框等其他自定义样式
  },
  btnText: {
    color: '#fff',
    fontSize: 16,
    textAlign: 'center',
  },
});

方法二：修改原生Button的color属性（跨平台效果不一致） #

如果坚持使用原生<Button>，可以设置color属性，但注意跨平台表现不同：

• Android端：color会控制按钮的背景色
• iOS端：color仅控制按钮的文字颜色，背景仍为系统默认样式

代码示例：

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

综上，自定义按钮的方式更灵活，能保证跨平台样式统一，更适合你的需求。

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