ReactNative TouchableOpacity按钮不可见但可触发onPress问题求助

问题原因 #

你给TouchableOpacity设置样式时误用了color属性，没有为容器设置背景色：

• color属性仅对文本类组件生效，用于控制文字颜色
• TouchableOpacity属于容器类组件，需要通过backgroundColor属性设置填充背景色
  你的按钮当前没有背景填充，和父视图默认的白色背景重合，所以视觉上不可见，但组件的布局、交互逻辑都正常，因此可以正常触发onPress回调。

修复方案 #

将样式表中button的color属性改为backgroundColor即可：

const styles = StyleSheet.create({
  button: {
      backgroundColor: "tomato",
      borderRadius: 25,
      justifyContent: "center",
      alignItems: "center",
      padding: 15,
      height: 50,
      width: "100%",
  },
  text: {
      color: "#fff",
      fontSize: 18,
      fontWeight: "bold",
      textTransform: "uppercase",
  }
})

内容的提问来源于stack exchange，提问作者Levi Walsh