react-native - 单击 React Native 中的图标打开菜单

Question

我无法确定在 React Native 中单击图标时如何显示菜单项

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()}

因为此方法返回 View 而不是菜单弹出窗口。

而不是:

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

更新为:

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

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

我在您给定的链接上尝试了此代码，它有效..