Javascript 在ListView中打开和关闭一个可展开项-React Native

我有一个邮件列表，你可以点击并展开更多信息。目前，我的实现通过单击任何消息来扩展/折叠所有消息

在每个选项卡组件中，我按如下方式填充它：

  tabContent =  (x, i) => <View style={{height: this.state.height}}>
    <List onLayout={({nativeEvent: {layout: {height}}}) => {
      this.heights[i] = height;
      if (this.state.activeTab === i) this.setState({height})
    }} >
         {
            new Array(x).fill(null).map((_, i) => <Item key={i}>
               <View>
                 <TouchableOpacity onPress={() => this.setState({ open: !this.state.open })}>
                 <Text>Message {i}</Text>
                 </TouchableOpacity>
                 <Expand value={this.state.open}>
                   <Text>
                     Body of Message
                   </Text>
                 </Expand>
                </View>
             </Item>
          )}

     </List>
   </View>

heights = [500, 500];
state = {
  activeTab: 0,
  height: 500
};

是什么导致它们同时展开/折叠？我如何才能将其更改为仅展开/折叠单击的项目？

您可以使某些activeIndex处于该状态，并选中该状态以展开和折叠相应的视图。比如说,

在你州

...
this.state={
  open: false,
  activeIndex: 0
}
...

渲染视图时，可以检查activeIndex

---

希望这能给你一些想法。

忽略这一点，好吧，它可以正常工作，但单击单独的消息会使打开的消息崩溃，然后我必须再次单击它。是的，根据上述逻辑，一次只能打开一条消息

...
<TouchableOpacity onPress={() => this.setState({ open: !this.state.open, activeIndex: i })}>
...
<Expand value={(this.state.activeIndex === i) && this.state.open}>
..