如何在 Dynamic FlatList 中添加 React native Popup Menu

Question

我会尝试在 flatlist 中添加 react native 弹出菜单。但问题是菜单只显示了两个flatlist item

<MenuContext>
                                            <Menu
                                              style={{ height: 200,width:54, alignItems: 'center', marginLeft:'85%' }}
                                              onSelect={(value) => this.OptionMenu(value,item.id)}>
                                              <MenuTrigger triggerTouchable={{activeOpacity: 1,}}>
                                                <Icon name="ellipsis-v" size={25} style={{color:'#FFF',paddingHorizontal:20, paddingVertical:20 }} />
                                              </MenuTrigger>
                                              <MenuOptions optionsContainerStyle={{width: 100}}>
                                                  <MenuOption value={1}>
                                                    <Text>Update </Text>
                                                  </MenuOption>
                                                  <MenuOption value={2}>
                                                    <Text>Delete</Text>
                                                  </MenuOption>
                                                  <MenuOption value={3}>
                                                    <Text>Share</Text>
                                                  </MenuOption>
                                            
                                              </MenuOptions>
                                            </Menu>
                                        </MenuContext>

m.

Answer 1

您可以像 FlatList 中的任何其他组件一样使用弹出菜单。

    <FlatList
      data={data}
      renderItem={({ item }) => (
        <Menu onSelect={value => Alert.alert(value)}>
          <MenuTrigger text={'Select option ' + item.value} />
          <MenuOptions>
            <MenuOption value="A" text="A" />
            <MenuOption value="B" text="B" />
            <MenuOption value="C" text="C" />
        </MenuOptions>
      </Menu>
      )}
      style={{ height: 200 }}
    />

完整示例可在此处找到https://github.com/instea/react-native-popup-menu/blob/master/examples/InFlatListExample.js