Wie wählt man einen Eintrag von ListView in React-Native?

Question

Ich bin ein Neuling in React-Native. Ich möchte ein Element mit ListView auswählen. Als ich das erste Mal auf item drücke, wurde der ListView renderRow() Aufruf, aber nachdem alles nicht funktioniert! Wie kann ich diesen Fehler beheben? Mein Problem ist wo?

Ich schrieb eine Demo in here

Answer 1

ich zunächst leer Datasource Einstellung endete, das Setzen sie dann mit Datenvariable in componentDidMount zu klonen. Dann habe ich in der onPressRow-Methode die erforderlichen Änderungen an einer Kopie der Datenzustandsvariablen vorgenommen und sie dann über die setState-Methode auf Daten zurückgesetzt. Nicht sicher, was dein Problem war, aber das funktioniert jetzt.

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    ListView, 
    TouchableHighlight 
} from 'react-native'; 

class ListViewDemo extends Component { 

    constructor(props) { 
    super(props); 

    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     data: this._genRow(), 
     dataSource: ds, 
    } 
    } 

    componentDidMount() { 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(this.state.data) 
    }); 
    } 

    _genRow(){ 
    var datas = []; 
    for (var i = 0; i < 5; i++) { 
     datas.push({ 
     row: i, 
     isSelect: false, 
     }); 
    } 
    console.log('datas ' + JSON.stringify(datas)); 
    return datas; 
    } 

    render() { 
    return (
     <ListView 
     dataSource = {this.state.dataSource} 
     renderRow = {this._renderRow.bind(this)} 
     renderHeader = {() => <View style={{height: 10, backgroundColor:  '#f5f5f5'}} />} 
     onEndReached = {() => console.log('')} 
     renderSeparator = {(sectionID, rowID) => 
      <View 
      style={styles.style_separator} 
      key={`${sectionID} - ${rowID}`} 
      />} 
     /> 
    ); 
    } 

    _renderRow(rowData: string, sectionID: number, rowID: number) { 
    console.log('render row ...'); 
    return (
     <TouchableHighlight onPress={this._onPressRow.bind(this.rowID, rowData)}> 
     <View style={styles.style_row_view}> 
      <Text style={styles.style_text}>{rowData.row}</Text> 
      <Text style={styles.style_text}>{rowData.isSelect ? 'true' : 'false'}     </Text> 
      </View> 
      </TouchableHighlight> 
     ); 
     } 

    _onPressRow(rowID, rowData) { 

    rowData.isSelect = !rowData.isSelect; 
    var dataClone = this.state.data; 
    dataClone[rowID] = rowData; 
    this.setState({ 
     data: dataClone 
    }); 
    console.log(this.state.data); 
    } 
} 

const styles = StyleSheet.create({ 
    style_row_view: { 
    flex: 1, 
    flexDirection: 'row', 
    height: 57, 
    backgroundColor: '#FFFFFF', 
    }, 
    style_text: { 
    flex: 1, 
    marginLeft: 12, 
    fontSize: 16, 
    color: '#333333', 
    alignSelf: 'center', 
    }, 

}); 

AppRegistry.registerComponent('ListViewDemo',() => ListViewDemo);