Javascript Girl
  1. Javascript Girl
  3. Comment sélectionner un élément de ListView dans React-Native?
Intereting Posts
Comment dire à JSHint d'ignorer toutes les variables non définies dans un seul fichier? Obtenir des valeurs de la chaîne de matrice codée JSON Essayer de comprendre les promesses d'Ember JS Comment ajouter une nouvelle propriété avec le même nom de clé dans l'objet déclaré? Alerte d'autorisation de location sur iPhone avec Cordoue Calculer la caméra fov distance pour la sphère Prévenir le découpage de texte dans D3 (graphique Javascript) Appeler une fonction de fenêtre parent d'un iframe Passer un paramètre indéfini à la fonction – vérifier si la variable existe Regex rejette des personnages consécutifs TypeError: Impossible de lire la propriété 'setState' de undefined Ruby méthodes dans JavaScript dans HAML Faites pivoter un site Web dans le sens des aiguilles d'une montre ou dans le sens inverse Le contexte d'invocation (ceci) de l'appel de fonction forEach Comment puis-je afficher un livre de format epub en HTML5 / CSS / Jquery pur

Comment sélectionner un élément de ListView dans React-Native?

Je suis un débutant dans React-Native. Je souhaite sélectionner un élément en utilisant ListView. Lorsque j'appuie sur l'élément, le ListView renderRow () était un appel, mais après tout, ça ne fonctionne pas! Comment puis-je réparer ce bug? Mon problème est l'endroit où?

J'ai écrit une démo ici

J'ai fini par définir initialement la source de données vide, puis la configurer pour cloner avec la variable de données dans componentDidMount. Ensuite, dans la méthode onPressRow, j'ai apporté les modifications requises à une copie de la variable d'état des données, puis je l'ai retrouvé aux données via la méthode setState. Je ne suis pas sûr de votre problème, mais cela fonctionne maintenant. 

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