Блог

У меня есть flatlist, который получает friendsArray со следующей структурой данных…

У меня есть модальный, который имеет функцию onPress, с помощью этого onPress я хотел бы получить значение этого ключа. У меня есть следующий код, но обычно этот код предоставляет мне ключ того, что я только что выбрал в flatlist… я хотел бы получить ключ выбранного элемента на один уровень глубже, как мне это сделать?

Вот App.js

 onFriendChatPress = key => {
   let friend = this.state.friendsArray.find(game => { return game.key === key })
}


render(){
return{
    <View>
        <FriendsModal
            onChatPress={() => this.onChatPress()}
            onClosePress={() => this.closeModal()}
            onFriendPress={() => this.onFriendPress()}
            onFriendChatPress={() => this.onFriendChatPress()}
            selGame={this.state.selGame}
            visible={this.state.modalVisible}
            selGame={this.state.selGame}
        />
    </View>
}

  

Вот FlatList в FriendsModal

       <FlatList
           style={styles.flatList}
           data={this.props.selGame.friends}
           horizontal={true}
           renderItem={(info) => (
                       <ModalProfileCard
                               displayName={info.item.displayName}
                               image={info.item.image}
                               onFriendPress={() => this.props.onFriendPress(info.item.key)}
                               onFriendChatPress={() => this.props.onFriendChatPress(info.item.key)}
                        />
                       )
                      }
              />
  

Вот карточка в модальном

 
function modalProfileCard(props) {
    return (
        <View style={styles.container}>
            <TouchableOpacity onPress={props.onFriendsPress} style={styles.friendInfo}>
                <Image style={styles.profImage} source={{ uri: props.image }} />
                <View style={styles.nameContainer}>
                    <Text style={styles.name}>{props.displayName}</Text>
                </View>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button} onPress={props.onFriendChatPress}>
                {buttonText}
            </TouchableOpacity>
        </View >
    )
}
  

Вы можете сделать что-то вроде этого.

 const onPress = (key) => {
   //you have the key here
}

return ( 
     <Flatlist 
     data={your_data}
     renderItem={({item})=> <YourComponent {...item} onPress={onPress} />}
/> )



const YourComponent = ({key,onPress}) => {
     const onPress = () => {
        onPress(key);
     } 
   return (
      <TouchableOpacity onPress={onPress}>
      </TouchableOpacity>
  )
}
  

Хотя я понимаю, что

В renderItem разве вы не должны использовать info.DisplayName вместо info.item.displayNam? и так далее ..

Существует также родительский FlatList? Вы сохраняете выбранную игру в состоянии selGame, верно? Вы также можете сохранить его индекс и перейти к дочернему компоненту, чтобы было легко найти ключ выбранной игры.