2

react native popup menu 的文档提到了如何创建带有复选标记的菜单选项

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

1 回答 1

0

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

const IconOption = ({iconName, text, ...others}) => (
  <MenuOption {...others} >
    <Text>
      <Icon name={iconName} />
      {' ' + text}
    </Text>
  </MenuOption>
)
于 2017-05-20T15:58:40.010 回答