Question

在React Native中，我有这个组件：

<TouchableHighlight onPress={this.selectItem}>
  <Text
       style={this.getTextIndexStyle()}>
      {someText}
  </Text>
</TouchableHighlight>

这个Text组件调用此方法来获取其样式：

getTextIndexStyle() {
    return {
        position: 'absolute',
        opacity: 0.75,
        backgroundColor: this.getTextBoxColor(),
        textAlign: 'center',
        color: '#ffffff',
        fontSize: 20,
        fontWeight: 'bold'
    };
}

反过来又调用此方法来获取颜色。

getTextBoxColor() {
    if(this.state.highlighted) {
        return Constants.HIGHLIGHTED_TEXT_BOX_COLOR;
    }
    return Constants.UNHIGHLIGHTED_TEXT_BOX_COLOR;
}

此外，当用户点击TouchableHighlight时，他或她会触发此操作：

selectItem() {
    this.setState({highlighted: true});
}

我的问题是，如果我点击TouchableHighlight，Text组件就不会改变其颜色。

我不确定this.state是否未更新或是否已更新，但由于某些奇怪的原因this.getTextBoxColor()未被调用。

知道如何更新颜色吗？

Answer 1

您的TouchableHighlight的onPress的JSX中有错误，您可以通过更改为：

来修复它

<TouchableHighlight onPress={() => this.selectItem}>

你还应该创建一个StyleSheet并在渲染过程中传递你想要的颜色

const style = (backgroundColor) => (
    StyleSheet.create({
        textStyle: {
            position: 'absolute',
            opacity: 0.75,
            backgroundColor,
            textAlign: 'center',
            color: '#ffffff',
            fontSize: 20,
            fontWeight: 'bold'
     })
);

然后，在你的渲染方法：

render(){
     const styles=style(getTextBoxColor())
     return(
          ...
     )
}

和你的文字：

  <Text
       style={styles.textStyle}>
      {someText}
  </Text>

编辑：（{backgroundColor}）=＆gt; （的backgroundColor）

如何在状态更改时立即更新CSS

1 个答案: