Question

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

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


            })

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

2 个答案: