реагировать на собственное модальное открытие от последнего объекта в массиве - PullRequest
Новая
       8

реагировать на собственное модальное открытие от последнего объекта в массиве

0 голосов
/ 02 октября 2019

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

Мой код выглядит следующим образом: 

this.state = {
  fontLoaded: false,
  feed: [{
    username: ["Jeff", "Kyle", "David"],
    caption: ["Great", "Amazing", "Not so Good"],
    comments: ["Comment 1", "Comment 2", "No Comment"],
    photo:[Pic1,Pic2,Pic3],
  }]
}

state = {
    isModalVisible: false,
  };

  toggleModal = () => {
    this.setState({ isModalVisible: !this.state.isModalVisible });
  };

renderFeed = () => {
    return this.state.feed.map((card, index) => {
      return card.username.map((username, i) => {
        if(card.caption[i])
          return (
            <View>
            <TouchableHighlight onPress={this.toggleModal} underlayColor="white">
            <Card
            key={`${i}_${index}`}
image={card.photo[i]}
containerStyle={{borderRadius:10, marginRight:1, marginLeft:1,}}>
<View
    style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}
  >
  <View style={{ flexDirection: 'row'}}>
    <Avatar 
        size="small"
        rounded
        source={card.photo[i]}
  />
    </View>
    <View style={{flexDirection:'row'}}>
 <Avatar
    rounded
    icon={{ name:'heart-multiple-outline', type:'material-community', color: '#ff4284'}}
      overlayContainerStyle={{marginLeft:5}}
        reverse
   size='small'/>
   <Avatar
        reverse
        rounded
  icon={{ name:'comment-processing-outline', type:'material-community' }}
  overlayContainerStyle={{backgroundColor: '#dbdbdb',marginLeft:5}}
   size='small'/>
    </View>
  </View>
    { this.state.fontLoaded == true ? (
      <View style={{flexDirection:'row'}}>
<Text style={{fontFamily: 'MontserratB', color:'#bf00b9', marginTop:10}}>{username}</Text>
    <Text style={{fontFamily:'Montserrat', marginTop:10}}>{card.caption[i]}</Text>
  </View>
            ) : (<Text> Loading...</Text>)
      }
          <Text style={{marginTop:4, color:'#878787'}}>{card.comments[i]}</Text>
</Card>
</TouchableHighlight>
<Modal 
animationIn="zoomInDown" 
animationOut="zoomOutDown" 
animationInTiming={700}
          animationOutTiming={600}
          backdropTransitionInTiming={600}
          backdropTransitionOutTiming={600}
           isVisible={this.state.isModalVisible}>
            <Image source={card.photo[i]}
            style={{width: SCREEN_WIDTH - 20,
                    height: 300, justifyContent: 'center', alignSelf: 
                    'center' }}/>
                    <Card
containerStyle={{ width: SCREEN_WIDTH - 20, marginTop: 0,  justifyContent: 'center', alignSelf: 
                    'center' }}>
<View style={{ flexDirection:'row' }}>
      <Avatar 
        size="small"
        rounded
        source={card.photo[i]}
  />
  <View style={{ flex:2, flexDirection:'row', justifyContent:'flex-end' }}>
    <Avatar
    rounded
    icon={{ name:'heart-multiple-outline', type:'material-community'}}
      overlayContainerStyle={{backgroundColor: '#ff4284',marginLeft:5}}
        reverse
   size='small'/>
   <Avatar
        reverse
        rounded
  icon={{ name:'comment-processing-outline', type:'material-community' }}
  overlayContainerStyle={{backgroundColor: '#dbdbdb',marginLeft:5}}
   size='small'/>
   </View>
   </View>
   <View style={{ flexDirection:'row' }}>
    <Text style={{fontFamily: 'MontserratB', color:'#bf00b9', marginTop:10}}>{username}</Text>
    <Text style={{fontFamily:'Montserrat', marginTop:10}}>{card.caption[i]}</Text>
  </View>
    <Text style={{marginTop:4, color:'#878787'}}>{card.comments[i]}</Text>
</Card>

            <Button style={{marginTop:0, borderBottomRightRadius: 20, borderBottomLeftRadius: 20, borderTopLeftRadius: 0, borderTopRightRadius: 0, width: SCREEN_WIDTH - 20, alignSelf: 'center', justifyContent: 'center'}} title="Close" onPress={this.toggleModal} />
        </Modal>
        </View>
          );
        return <React.Fragment />;
      });
    })
}

все работает отлично, за исключением того, что независимо от того, к какой карте прикасались, открывается модал с последними объектами в массиве. Поэтому, независимо от того, какая из трех карт нажата, модал всегда будет открываться с информацией о Дэвиде

...