Question

我将尝试在平板列表中添加react native弹出菜单。但是问题是菜单只显示了两个平面列表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

如何在动态FlatList中添加React本机弹出菜单

1 个答案: