如何在 React Native 中设置动态下拉菜单的条件可见性

Question

我在我的列表中使用 react-native-material-menu 来选择 select“编辑”和“删除”操作。当列表中只有一个时，它工作得很好。但是，当在列表中呈现多个数据并单击 3 点菜单图标时，它也会显示多个下拉列表，因为我的条件适用于所有数据列表。

这是我的代码：

const [visible, setVisible] = useState(false);
const hideMenu = () => setVisible(false);
const showMenu = () => setVisible(true);

<Block style={styles.listContainer}>
                <Text muted style={{ fontWeight: 'bold', marginBottom: 5 }} >Unassigned 0 employees | 0 manager, you</Text>
                <Block middle style={{ marginTop: 14, marginBottom: 16 }}>
                    <Block style={styles.divider} />
                </Block>
                <FlatList
                    ref={flatListRef}
                    data={data}
                    renderItem={({ item, index }) => <Item item={item} index={index} />}
                    refreshing={isRefreshing}
                    onRefresh={handleRefresh}
                    keyExtractor={(item, index) => index.toString()}
                    ListFooterComponent={() =>
                        !isAtEndOfScrolling && (
                            <ActivityIndicator size="large" color="gray" />
                        )
                    }
                />

                <Button onPress={()=> gotoNewTeam(null, 'create')} color="default" style={styles.button}>
                    Create team
                </Button>
            </Block>




<Block style={{ flexDirection: 'row'}}>
  <Ionicons onPress={showMenu} name="ellipsis-vertical" size={14} color="#8898aa" />
  <Menu
      visible={visible}
      onRequestClose={hideMenu}
   >
      <MenuItem onPress={()=> gotoNewTeam(item, 'update')}>Edit</MenuItem>
      <MenuItem onPress={()=> showAlert(item.id)}>Delete</MenuItem>
  </Menu>

Answer 1

如果我是你，我会使用地图遍历块并使用索引属性来切换所选菜单。

我没有测试但是类似的东西:

  const myProps = [
    { employee: 'whatever', managers: 'whatever' },
    { employee: 'whatever', managers: 'whatever' },
    { employee: 'whatever', managers: 'whatever' },
  ];

  const [activeIndex, setActiveIndex] = useState(undefined);

  myProps.map((data, index) => {
    <Block {...data}>
      <Ionicons
        onPress={() =>
          activeIndex !== index
            ? setActiveIndex(index)
            : setActiveIndex(undefined)
        }
        name={'ellipsis-vertical'}
        size={14}
        color={'#8898aa'}
      />
      <Menu visible={activeIndex === index} onRequestClose={() => setActiveIndex(undefined)}>
        <MenuItem onPress={() => gotoNewTeam(item, 'update')}>Edit</MenuItem>
        <MenuItem onPress={() => showAlert(item.id)}>Delete</MenuItem>
      </Menu>
    </Block>;
  });
```

如何在 React Native 中设置动态下拉菜单的条件可见性

How to set conditional visibility of a dynamic dropdown menu in react native

react-native