Comment passer des accessoires de l'élément FlatList à Modal?

Question

J'ai implémenté un composant View contenant un FlatList, qui rend TouchableHighlights. J'ai également implémenté un composant Modal, que j'aimerais importer à divers endroits, y compris le composant qui rend le FlatList. J'ai déjà réussi à ouvrir le modal de l'extérieur (en passant un accessoire pour la visibilité, en y accédant via nextProps et en définissant la valeur modale "modalVisible") et en le fermant de l'intérieur (simplement en changeant sa valeur d'état "modalVisible"). MAIS: Je souhaite également transmettre des données au modal de chaque élément FlatLists. Un élément rendu en tant que TouchableHighlight devrait ouvrir le modal onPress et le modal devrait contenir des données de l'élément (dans le code ci-dessous ce serait l'identifiant des éléments). Comment puis-je transmettre les données au modal? Je ne parviens pas à l'utiliser avec nextProps. Cela semble plus être un problème lié à la définition de l'état à partir d'un élément FlatLists plutôt que du modal.

Modal:

export default class ModalView extends React.Component { 
constructor() { 
    super(); 
    this.state = { 
    modalVisible: false, 
    id: null, 
    }; 
} 

componentWillReceiveProps(nextProps) { 
    this.setState({ 
    modalVisible: nextProps.modalVisible, 
    id: nextProps.id, 
    }) 
} 

render() { 
    return (
    <Modal 
     animationType="slide" 
     transparent={ true } 
     visible={ this.state.modalVisible } 
     onRequestClose={() => { this.props.setModalVisible(false) }} 
    > 
     <View> 
     <View> 
      <Text>{ this.state.id }</Text> 
      <TouchableHighlight 
      onPress={() => { this.props.setModalVisible(false) }} 
      > 
      <Text>Hide Modal</Text> 
      </TouchableHighlight> 
     </View> 
     </View> 
    </Modal> 
) 
} 
} 

FlatList rendu TouchableHighlights:

export default class RecentList extends React.Component { 
constructor() { 
    super(); 
    this.state = { 
    modalVisible: false, 
    id: null, 
    } 
} 

_onPressItem(id) { 
    this.setState({ 
    modalVisible: true, 
    id: id, 
    }); 
}; 

_renderItem = ({item}) => { 
    return (
    <TouchableHighlight 
     id={item.id} 
     onPress={this._onPressItem} 
    > 
     <View> 
     <Text>{id}</Text> 
     </View> 
    </TouchableHighlight> 
) 
}; 

render() { 
    let data = realm.objects('Example').filtered('completed = true') 
      .sorted('startedAt', true).slice(0, 10) 
    return (
    <View> 
     <ModalView 
     modalVisible={ this.state.modalVisible } 
     setModalVisible={ (vis) => { this.setModalVisible(vis) }} 
     id={ this.state.id } 
     /> 
     <FlatList 
     data={data} 
     renderItem={this._renderItem} 
     keyExtractor={(item, index) => index} 
     /> 
    </View> 
) 
} 
} 

Answer 1

Une petite erreur que vous avez manqué ...

_renderItem = ({item}) => { 
    return (
    <TouchableHighlight 
     id={item.id} 
     onPress={() => this._onPressItem(item.id)} // Your not sending the item.id 
    > 
     <View> 
     <Text>{id}</Text> 
     </View> 
    </TouchableHighlight> 
) 
};