रिटर्न-नेटिव में ListView के एक आइटम का चयन कैसे करें?

Question

मैं प्रतिक्रिया-मूल में एक नौसिखिया हूं। मैं ListView का उपयोग कर एक आइटम का चयन करना चाहता हूं। जब मैं पहली बार आइटम दबाता हूं, तो ListView renderRow() कॉल किया गया था, लेकिन सभी काम नहीं करने के बाद! मैं इस बग को कैसे ठीक कर सकता हूं? मेरी समस्या कहां है?

मैं here

Answer 1

मैं शुरू में खाली डेटा स्रोत की स्थापना समाप्त हो गया में एक डेमो लिखा था, तो यह स्थापित करने componentDidMount में डेटा चर के साथ क्लोन करने के लिए। फिर, onPressRow विधि में, मैंने डेटा स्टेट वैरिएबल की प्रतिलिपि में आवश्यक परिवर्तन किए और फिर इसे सेटस्टेट विधि के माध्यम से डेटा पर सेट कर दिया। सुनिश्चित नहीं है कि आपकी समस्या क्या थी, लेकिन यह अब काम कर रहा है।

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