react native弹出菜单的文档提到了如何使用复选标记创建菜单选项
const CheckedOption =(props)=> ( )
我想用自定义图标创建菜单选项。我没有这些图标的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>
);
}
}
答案 0 :(得分:0)
对于您需要特殊字体的图标 - 例如使用react-native-vector-icons
然后使用与CheckedOption相同的方法:
const IconOption = ({iconName, text, ...others}) => (
<MenuOption {...others} >
<Text>
<Icon name={iconName} />
{' ' + text}
</Text>
</MenuOption>
)