使用单选按钮反应原生 FlatList

Question

class App extends Component {
constructor() {
    super();
    this.state = {checked: false}}
onCheck = () => {
    const { checked } = this.state;
    if(checked == true){this.setState({ checked: false  }) }
    else {this.setState({ checked: true  })}}
render() {
    return (     
            <FlatList 
                 data = {[
                    {firstName:'User_A',},
                    {firstName:'User_B',},
                    {firstName:'User_C',},
                    {firstName:'User_D',},
                    {firstName:'User_E',},
                ]}
                 renderItem = {({item}) => 
                <TouchableOpacity  onPress={() => { this.onCheck() }} activeOpacity = {0.5}>

                 <View style = {{flexDirection : 'row'}}>
                  <Left>
                 <Radio selected = {this.state.checked}/>
                 </Left>
                 <Card style = {{marginRight : 100, height : 50}}>   
        <View>
            <View>
                <Text> {item.firstName} </Text>
        </View>
                 </Card>
                 </View>
                </TouchableOpacity>
                }
                 />
    )
}

} 使用本机反应，我需要一个带有单选按钮的平面列表来分别选择每个项目，但是当我按下一个项目时，列表中的每个项目都会被选中。如何管理单品选择？以上是我的代码和示例输出

Answer 1

这里的想法是：

• 创建一个分离的组件以避免无用的重新渲染
• 将选定的索引存储在状态中，而不是布尔值，以便单选按钮看起来像

<Radio selected={this.state.selectedIndex === index}/>，其中 index 是 renderItem 接收到的对象的一部分