在 React Native 中单击图标打开菜单

Question

我无法确定在 React Native[=] 中单击 Icon 时如何显示 Menu 项31=]

Expo Link

代码

_onPressItem = () => {
    this.setState({ opened: true });
    };

  render() {
    return (
      <View style={styles.container}>
        <ListItem
          title={
            <View>
              <Text style={{ fontWeight: "bold" }}>Mason Laon Roah</Text>
              <Text>9886012345</Text>
            </View>
          }
          subtitle={
            <View>
              <Text>445 Mount Eden Road, Mount Eden, Auckland. </Text>
              <Text>Contact No: 134695584</Text>
            </View>
          }
          leftAvatar={{ title: 'MD' }}
          rightContentContainerStyle={{ alignSelf: 'flex-start'}}
          rightTitle={<Icon type="material" color="red" name="more-vert" />}
        />
      </View>     
    );
  }

  getMenuView() {
    const { opened } = this.state;

    return (
      <MenuProvider style={{flexDirection: 'column', padding: 30}}>
        <Menu
          opened={opened}
          onBackdropPress={() => this.onBackdropPress()}
          onSelect={value => this.onOptionSelect(value)}>
          <MenuTrigger onPress={() => this._onPressItem()} text="Menu Icon Here" />
          <MenuOptions>
            <MenuOption value={1} text='One' />
            <MenuOption value={2}>
              <Text style={{color: 'red'}}>Two</Text>
            </MenuOption>
            <MenuOption value={3} disabled={true} text='Three' />
          </MenuOptions>
        </Menu>
      </MenuProvider>
    );
  }

请告诉我如何将菜单与图标集成..

基本上所有项目都显示在 FlatList 中，其中每个项目都有自己的 菜单项

Answer 1

只需更新以下代码：

而不是：

rightTitle={<Icon type="material" color="red" name="more-vert" />}

更新为：

rightTitle={this.getMenuView()}

因为这个方法returns视图不是弹出菜单。

而不是：

<MenuTrigger onPress={() => this._onPressItem()} text="Menu Icon Here" />

更新为：

<MenuTrigger onPress={() => this._onPressItem()}>
              <Icon type="material" color="red" name="more-vert" />
          </MenuTrigger>

这样它就不会打印文本，而是显示图标。

我在你给定的 link 上试过这段代码，它有效..