如何包含带有自定义图标的菜单选项？

Question

React Native 弹出菜单的文档提到了如何创建带有复选标记的菜单选项

const CheckedOption = (props) => ( )

我想创建带有自定义图标的菜单选项。我没有这些图标的 unicode 值。我创建了一个自定义 MenuOptionWithIcon 组件并将图标和菜单选项包装在视图中。

export class MenuOptionWithIcon
    extends React.Component<IMenuOptionProps, {}> {

    public static defaultProps: Partial<IMenuOptionProps> = {
        disabled: false,
    };

    public render() {
        return (
            <View style={PopupMenuStyleSheet.menuOptionWithIcon}>
                {this.props.icon}
                <MenuOption
                    {...this.props}
                    text={this.props.text}
                    onSelect={this.props.onSelect}
                    disabled={this.props.disabled}
                />
            </View>
        );
    }
}

但我现在无法将 customStyles 应用于这些选项。我想增加每个选项的填充，以便增加点击目标。这是创建带有图标的自定义菜单选项的正确方法吗？或者有没有办法为我需要的图标获取 unicode 值？谢谢！

编辑：

根据下面答案中的建议，我执行了以下操作，但现在我只能在菜单选项中看到文本。我没有看到显示的图标。 onSelect 有效，显示文本但不显示图标。

const IconOption = (props) => (
  <MenuOption {...props}>
     <Icon name={props.iconName} size={30} />
     {props.children}
  </MenuOption>
);

<MenuOptions customStyles={MenuOptionStyles}>
   <IconOption
       iconName='md-bookmark'
       onSelect={this.onSelectSave.bind(this)}
       text={MenuOptionStrings.Save}
   />
</MenuOptions>

Answer 1

对于您需要特殊字体的图标 - 使用例如react-native-vector-icons 然后使用与 CheckedOption 相同的方法：

const IconOption = ({iconName, text, ...others}) => (
  <MenuOption {...others} >
    <Text>
      <Icon name={iconName} />
      {' ' + text}
    </Text>
  </MenuOption>
)

如何包含带有自定义图标的菜单选项？

How to include menu options with custom icons?

unicode

react-native

react-native-popup-menu