时间戳

首页 > 解决方案 > 如何在 Dynamic FlatList 中添加 React 本机弹出菜单

react-native - 如何在 Dynamic FlatList 中添加 React 本机弹出菜单

问题描述

我将尝试在平面列表中添加反应原生弹出菜单。但问题是 menu 只显示了两个 flatlist ite

<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>

米。

标签： react-nativereact-native-popup-menu

解决方案

您可以将弹出菜单用作 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

推荐阅读