Question

react native弹出菜单的文档提到了如何使用复选标记创建菜单选项

const CheckedOption =（props）=＆gt; （）

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

#!/usr/bin/env python3
from pathlib import Path
import click
chunks = [
    ('status=', 'blue'),
    ('%{http_code} ', 'green'),
    ('%{redirect_url} ', 'green'),
    ('size=', 'blue'),
    ('%{size_download} ', 'green'),
    ('time=', 'blue'),
    ('%{time_total} ', 'green'),
    ('content-type=', 'blue'),
    ('\\"%{content_type}\\"', 'green'),
]
content = '-w "\\n'
for chunk, colour in chunks:
    content += click.style(chunk, fg=colour)
content += '\\n"\n'

path = (Path.home() / '.curlrc').resolve()
print('writing:\n{}to: {}'.format(content, path))
path.write_text(content)

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

修改

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

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

Answer 1

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

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

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

1 个答案: