React-native, Liste görünümünde onay kutusu nasıl kullanılır?

Question

Tepki yerel uygulamasında, uygulama iletişim bilgilerimi seçerek onay kutularını göstermeye çalışıyorum. Benim bakış onay kutusunu olarak

<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> 
}/> 

her satır üzerinde gösteren; ama çalışmıyor: burada benim kodudur.

Herhangi biri bana yardımcı olabilir. Şimdiden teşekkürler.

Answer 1

Bunu bileşen ayırma ile kolayca yapabilirsiniz. Burada bir göz atın:

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

Bundan sonra sadece çağırabilirsiniz: senin JSX ve voila

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

.

Önemli not: jsx kod bloklarınızın içinde dizi işlevleri kullanmayın.

Önemli not 2: Uygulamanızın durumunu kaydetmek için redux veya flux kullanmaya başlayın. Çok daha iyi kod tasarımı sağlayacaktır.

Umut, yardımcı olacaktır.