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

Question

在我的 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>
    )}
/>

在我看来，复选框显示在每一行，但不起作用。

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

Answer 1

您可以通过组件分离轻松做到这一点。请看这里：

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 contacts={this.state.dataSource} />

在你的 jsx 中，瞧。

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

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

希望，它会有所帮助。

Answer 2

            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',
                    }


            })