React native 在React native中，如何处理Listview中的复选框？

在我的react native应用程序中，我正在尝试使用复选框显示我的应用程序联系人详细信息以供选择。 这是我的密码：

<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData,sectionID,rowID) =>
    <TouchableHighlight onPress={() => this.goRideDetails(rowData)}>
      <Text style={styles.rideHeader}>{rowData.name} </Text> 
      <CheckBox checked={this.state.checked} onCheckBoxPressed={()=>this.setState({checked:!this.state.checked})}/>
    </TouchableHighlight>
 }/>

this.goRideDetails（rowData）}>
{rowData.name}
this.setState（{checked:！this.state.checked}）}/>
}/>

在我的视图中，复选框显示在每一行上，但不起作用

---

任何人都可以帮助我。提前谢谢。

您可以通过组件分离轻松完成此操作。请看这里：

export default class ContactList extends Component {

    static propTypes = {
        contacts: React.PropTypes.array,
    }

    static defaultProps = {
        contacts: [],
    }

    constructor(){
        super();
        this._renderRow = this._renderRow.bind(this);
    }

    _renderRow(rowData,sectionID,rowID) {
        return <Contact info={ rowData } />;
    }

    render() {
        return (
            <ListView
              dataSource={ this.props.contacts }
              renderRow={ this._renderRow }  
            />
        );
    }
}

export  class ContactList extends Component {
    static propTypes = {
        info: React.PropTypes.object.isRequired,
    }

    constructor(){
        super();
        this.goRideDetails = this.goRideDetails.bind(this);
        this.setChecked = this.setChecked.bind(this);
    }

    goRideDetails() {
        //your logic here
    }

    setChecked() {
        this.props.info.checked = !this.props.info.checked; //will be much better to do it with redux and action creators
    }

    render() {
        return (
            <TouchableHighlight onPress={ this.goRideDetails }>
                <Text style={ styles.rideHeader }>{this.props.info.name} </Text> 
                <CheckBox checked={ this.props.info.checked } onCheckBoxPressed={ this.setChecked }  />
            </TouchableHighlight>
        );
    }
}

导出默认类ContactList扩展组件{
静态类型={
联系人：React.PropTypes.array，
}
静态defaultProps={
联系人：[]，
}
构造函数（）{
超级（）；
this.\u renderRow=this.\u renderRow.bind（this）；
}
_renderRow（行数据、节ID、行ID）{
返回；
}
render（）{
返回(
);
}
}
导出类ContactList扩展组件{
静态类型={
信息：React.PropTypes.object.isRequired，
}
构造函数（）{
超级（）；
this.goRideDetails=this.goRideDetails.bind（this）；
this.setChecked=this.setChecked.bind（this）；
}
goRideDetails（）{
//你的逻辑在这里
}
setChecked（）{
this.props.info.checked=！this.props.info.checked；//使用redux和动作创建者将更好
}
render（）{
返回(
{this.props.info.name}
);
}
}

之后，您只需拨打：

<ContactList contacts={this.state.dataSource} />

在你的jsx和瞧

重要提示：不要在jsx代码块中使用数组函数

重要提示2：尝试开始使用redux或flux来存储应用程序的状态。它将提供更好的代码设计

希望有帮助。

从'React'导入React，{Component}
            import React , {Component} from 'react'
            import {
                Text,
                View,
                ListView,
                StyleSheet,
                TouchableOpacity,
                Image,
            } from 'react-native'

            import CheckBox from 'react-native-checkbox'

            var Folder = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}) 
            var folder = '' ////// all the new folder
            var check_folder = [] ////// all the check box conditions

            class ApproveContent extends Component {

                ///////// all the upper thing that are global variable for this script is has same value as that of the state the only reason we are using this because of the layout update //////////
                state={
                    folder:[],
                    data:[],
                    check:[]/////// this need to do just to upadte the layout of the check box
                }


                render(){
                    return(

                        <View style = {{flex:1,backgroundColor:'white',alignItems:'center'}}>

                        <ListView
                                dataSource={Folder.cloneWithRows(this.state.folder)}
                                renderRow={(rowData,rowID,sectionID) => <View style = {{ alignItems: 'center',margin:5}}>
                                <TouchableOpacity style = {{width:Dimension.ScreenWidth/1.2,height:Dimension.ScreenHeight/6,flexDirection: 'row',alignItems:'center'}}
                                onPress={() => {}}>
                                <CheckBox
                                 label=''
                                 labelBefore={false}
                                 checked={this.state.check[sectionID]}
                                 checkboxStyle = {{marginLeft: 20}}
                                 onChange={(checked) => {
                                 this.setState({
                                 check:!this.state.check
                                                })
                                 if(check_folder[sectionID] == false){
                                 check_folder[sectionID] = true
                                 this.setState({
                                                check:check_folder// has to do this because  we cant change the single element in the array
                                                })
                                }else{
                                check_folder[sectionID] = false
                                this.setState({
                                check:check_folder// has to do this because  we cant change the single element in the array
                                              })
                                     }
                                console.log(check_folder)a
                                 }}
                                />
                                </TouchableOpacity>
                                 </View>
                                }
                            />

                        </View>
                    )}
            }

            export default ApproveContent

            const style = StyleSheet.create({

                TextStyle:{
                    fontFamily: 'Roboto-Bold',
                    fontSize:15,
                },
                approveButton: {
                    bottom:0,
                    left:0,
                    alignItems: 'center',
                    }


            })

进口{
文本，
看法
ListView，
样式表，
可触摸不透明度，
形象,，
}从“反应本机”
从“反应本机复选框”导入复选框
var Folder=newlistview.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）
var folder=''''///所有新文件夹
var check\u folder=[]///所有复选框条件
类ApproveContent扩展组件{
/////////这个脚本的所有全局变量都具有与状态相同的值，这是我们之所以使用它的唯一原因，因为布局更新//////////
陈述={
文件夹：[]，
数据：[]，
选中：[]///此操作仅用于升级复选框的布局
}
render（）{
返回(
{}}>
{
这是我的国家({
检查：！this.state.check
})
如果（检查文件夹[sectionID]==false）{
检查文件夹[sectionID]=真
这是我的国家({
check:check\u folder//必须执行此操作，因为我们无法更改数组中的单个元素
})
}否则{
检查文件夹[sectionID]=false
这是我的国家({
check:check\u folder//必须执行此操作，因为我们无法更改数组中的单个元素
})
}
console.log（检查文件夹）a
}}
/>
}
/>
)}
}
导出默认ApproveContent
const style=StyleSheet.create({
文本样式：{
fontFamily:“Roboto Bold”，
尺寸：15，
},
批准按钮：{
底部：0，
左:0,，
对齐项目：“居中”，
}
})

是否希望每一行都有自己的复选框状态，以便可以单独选中/取消选中每一行复选框？你说的“但不工作”是什么意思。。。它在做什么？谢谢你的回复，是的，我想要，正是你说的。复选框状态未更新，当我按下复选框时，复选框未选中/未选中。嗨，Alex Belets，谢谢回答，但复选框未选中/未选中。我的意思是，当我最初使用flase时，复选框显示为未选中，当我按下/单击它时，复选框的值已更改为true，但复选框仍显示为unchecked。我在setChecked方法中做了一些更改，如{this.setState（{checked:！this.state.checked}）。现在工作正常。非常感谢AlexHi Neelima，您对更新用户界面以进行选中/取消选中所做的更改。您能帮助我吗？我真的陷入了这一困境。