从数组中的最后一个对象反应本机模态打开

Question

我正在创建一个渲染方法，它显示来自状态数组的信息，我想要它以便当用户触摸卡片时，模态框将打开并显示相同的信息。

我的代码如下：

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

一切正常，除了无论触摸哪张卡片，都会打开一个模态框，显示数组中的最后一个对象。所以无论按下三张卡片中的哪一张，总是会打开一个模态框，其中包含有关 David

的信息

Answer 1

你的样品的改良零食版本： https://snack.expo.io/H1yHPQQdr

从数组中的最后一个对象反应本机模态打开

react native Modal opening from last object in array

modal-dialog

react-native

expo