通过在 React Native 上使用 onPress 更改文本颜色

Question

我有 3 个可触摸的亮点。它都有文字颜色是白色。我希望当我按下其中一个按钮时，文本颜色会变成绿色。但是当我按下它时，按钮中的所有文本颜色都会变成绿色。请帮助我。

Answer 1

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

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

这样，当单击一个项目时，只有该项目会改变颜色。

Answer 2

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

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

Answer 3

您必须使用 style 属性来更改文本的颜色。喜欢这个

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

您也可以使用不带状态的默认值

style={{color ： this.state.colorCode ||"您的默认颜色"}}

Answer 4

这是我

的代码： this.state = { 文本颜色："白色" }

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

登录

我有三个这样的按钮，我希望当我单击其中一个按钮时只需更改文本颜色，另一个文本按钮不会更改