Question

我有一个ListView组件，我需要根据onPress事件独立更改每行的背景颜色。

<View style = {[styles.checkBox, {backgroundColor: this.state.button[rowID]? '#62C6C6':'transparent'}]}/>

因为我不知道将呈现多少行，但最多只有4行，所以我将数组状态button声明为[false, false, false, false]并根据行更改元素值。例如，当我按第一行时，如果rowID为0，我会将button的状态设置为[true, false, false, false]。在此方法中，button的状态已更改，但UI不会重新呈现背景颜色。我认为这里的逻辑是正确的（ish？），有什么方法可以得到预期的结果，或者有更聪明的方法来实现这个目标

Answer 1

对于ListView，需要再次重置dataSource以触发更改。

将dataSource设置为状态，如示例所示 https://facebook.github.io/react-native/docs/listview.html

Answer 2

建议将创建自己的组件以在每行内部渲染，并且仅在单击时更改该组件的背景。这意味着您不需要保留状态数组，状态将在每个组件本身中。

这将是你的组成部分：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      backgroundColor:'transparent'
    }
  }

  render() {
    return (
      <View style={{ backgroundColor: this.state.backgroundColor}}>
        <TouchableOpacity onPress={this.changeColor.bind(this)}>
            <Text>This is my Component</Text>
        </TouchableOpacity>
      </View>
    );
  }

  changeColor(){
    this.setState({
      backgroundColor:'#62C6C6'
    });
  }
}

然后在renderRow中你可以调用你的组件：

renderRow(rowData){
 return(
  <View>
    <MyComponent/>
  </View>
 )
}

状态数组中的更改元素不会触发UI更改

2 个答案: