Question

我获取列表视图以及呈现数据。但是当我点击/触摸复选框时，它不会切换选择。它只是保持与开始时相同的状态。

提前致谢。

RunLoop.current.run(until: Date(timeIntervalSinceNow : 1.0))

}

Answer 1

更改Flatlist renderItem道具

renderItem={({index, item}) => this._renderRow(index, item)}

更改_renderRow方法

_renderRow = (index, rowData) => {
     return <ListItem>
         <CheckBox checked={rowData.item.done} 
                   onPress={()=>{
                         this.setState((prevState, props) => ({ 
                         data[index].done = !prevState.data[index].done 
                         }));
                   }}
             />
         <Text>  {rowData.item.key}</Text>
       </ListItem>
}

您必须更改列表项的状态以获取更新列表。

Answer 2

我建议您为需要在FlatList上呈现的每个项目创建一个组件，并使用shouldComponentUpdate控制更改状态：

class CustomListItem extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            checked: props.checked
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        return this.state.checked !== nextState.checked 
    }

    render() { 
        const { text } = this.props
        const { checked } = this.state
        return (
        <ListItem>
          <CheckBox checked={checked} 
           onPress={()=> {
              this.setState({ checked: !checked })
           }}
           />
           <Text>{text}</Text>
        </ListItem>
        )
    }
}

所以改变_renderRow使用它，就像那样：

_renderRow(rowData) {
    const { done, key } = rowData.item
    return (
       <CustomListItem 
        text={done}
         checked={key}
       />
    )
}

本机库的React-native：不反映数据更改

2 个答案: