在 React Native 中使用地图绘制视图答案

【问题标题】：Draw view with map in React Native在 React Native 中使用地图绘制视图
【发布时间】：2019-11-29 14:27:38
【问题描述】：

到目前为止，我在这里所做的是，刚刚创建了三个随机视图，并且在状态的帮助下，我只是隐藏/显示了视图。但是，根据我的要求，逻辑如下：如果您单击任何关闭图标 (x)，它应该会消失，取而代之的是位于底部的视图应该替换它。就像在 Gmail 中一样，如果您归档邮件，它将被归档并消失。底部的视图将填满那个地方。

任何人都可以分享，为了弄清楚概念的小例子。我在这里理解应该使用数组完成任务，并且应该在 map=> 的帮助下显示视图。我有点困惑，因为这个任务要求概念对我来说是全新的。

【问题讨论】：

标签： javascript arrays reactjs react-native

【解决方案1】：

我为您创建了一个小示例，在该示例中我们显示卡片，当您单击某个项目时，该项目会被删除。

代码和工作示例可以在followig中找到link

const App = () => {
  const items = ['Item1', 'Item2', 'Item3']
  const [visible, setVisible] = useState({
    item0: true,
    item1: true,
    item2: true
  });
  const itemClicked = (item) => {
    setVisible({
      ...visible,
      [item]: false
    })
  }
  return (
    <View style={styles.container}> 
      {
        items.map((item, i) => {
          const itemRendered = `item${i}`;

          return (
            <View>
            {
              visible[itemRendered] && 
            <TouchableOpacity onPress={() => itemClicked(itemRendered)} style={styles[itemRendered]}>
              <Text>{item}</Text>
            </TouchableOpacity>
            }
            </View>
          ) 
        })  
      }
    </View>
  );
}

我使用map 渲染了 3 个可点击的项目。只有当它们应该基于visible[itemRendered] 的值显示时才会显示。组件保持哪些项目应该可见或不可见的状态。如果您单击一个项目，则状态会更新，因此不会显示单击的项目。

【讨论】：