在 React Native 上使用 onPress 更改文本颜色答案

【问题标题】：Change a text color by using onPress on React Native在 React Native 上使用 onPress 更改文本颜色
【发布时间】：2019-01-03 06:35:57
【问题描述】：

我认为有 3 个 TouchableHighLight。它都有文字颜色是白色的。我希望当我按下其中一个按钮时，文本颜色会变为绿色。但是当我按下它时，按钮中的所有文本颜色都会变成绿色。请帮帮我。

【问题讨论】：

您的意思是“您按下的只是按钮变为绿色文本，而不是所有按钮都变为绿色文本”？你能告诉我这个更清楚吗？谢谢
您应该与问题分享您的代码，以便有人可以帮助您。
@TungDuong 是的，就是这样。只是文字颜色和按钮改变

标签： react-native

【解决方案1】：

在这种情况下，我建议使用 Pressable API 及其子属性。

      <Pressable
        children={({ pressed }) => (
          <Text style={{ color: pressed ? '#FF9E00' : '#222'}}>
            text
          </Text>
        )}/>

这样当点击一个项目时，只有那个项目改变颜色。

【讨论】：

【解决方案2】：

请试试这个，您可以在构造函数中将默认颜色初始化为白色，其他按钮请按照此操作，希望对您有所帮助。

<TouchableHighLight style = {{height: 20, width:20}} onPress = {()=> this.setState(colorCode: 'green')}>
<Text>{this.state.colorCode}</Text>
</TouchableHighLight>

【讨论】：

是的，我使用它，但是当我有三个按钮时，我只想让其中一个按钮在按下时改变文本颜色

【解决方案3】：

你必须使用 style 属性来改变文本的颜色。像这样

style={{color : this.state.colorCode}}

你也可以使用没有状态的默认值

style={{color : this.state.colorCode || “您的默认颜色”}}

【讨论】：

【解决方案4】：

这是我的代码：这个.state = { 文本颜色：'白色' }

_onPressIn = () => {
    this.setState({
        textColor: 'green'
    });
}

_onPressOut = () => {
    this.setState({
        textColor: 'white'
    });
}

我有三个这样的按钮，我想当我点击一个按钮时只改变文本颜色，另一个文本按钮不改变

【讨论】：