React-nativeでは、Listviewのチェックボックスの処理方法は？

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> 
     ); 
    } 
} 

あなたは、単に呼び出すことができた後：あなたのJSXと出来上がりで

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

を。

重要事項：jsxコードブロック内に配列関数を使用しないでください。

重要事項2：アプリケーションの状態を保存するためにreduxまたはfluxを使用してみます。はるかに優れたコードデザインを提供します。

希望、それは役に立ちます。