将文本替换为图标

Question

我正在使用 react-native-popup-menu 在单击文本"设置"时弹出菜单。 这是我的代码

 <View>
    <Text>Hello world!</Text>
    <Menu>
      <MenuTrigger text='Settings' />
      <MenuOptions>
        <MenuOption onSelect={() => alert(`Save`)} text='Save' />
        <MenuOption onSelect={() => alert(`Delete`)} >
          <Text style={{color: 'red'}}>Delete</Text>
        </MenuOption>
        <MenuOption onSelect={() => alert(`Not called`)} disabled={true} text='Disabled' />
      </MenuOptions>
    </Menu>
  </View>

这工作正常，但我想显示一个来自'react-native-elements'的图标，而不是文本"设置"。通常我使用此代码显示图标

<Icon
         name='public' 
         color='#5877'
         onPress={this.handleClick.bind(this)} /> 

您知道是否有可能实现这一目标吗？

Answer 1

MenuTrigger 的文档指出，如果传递了text道具，则不会渲染children。

所以我假设您可以将任何 React 组件渲染为MenuTrigger的子组件，如下所示：

<MenuTrigger>
  <Icon
    name='public' 
    color='#5877'
  />
</MenuTrigger>

还要查看MenuTrigger组件的代码！https://github.com/instea/react-native-popup-menu/blob/master/src/MenuTrigger.js#L27