如何在自定义图标中添加菜单选项？-Java 学习之路

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值？谢谢！

EDIT:

根据下面答案中的建议，我做了以下操作，但现在我只看到菜单选项中的文字 . 我没有看到图标显示 . 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>

1 回答

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

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

回复于 2024-04-29T18:51:48+08:00

如何在自定义图标中添加菜单选项？

1 回答

相关问题