如何在 React Native 中将图标/图像添加到我的选择器项目？答案

【问题标题】：How do I add icon/images to my picker items in React Native?如何在 React Native 中将图标/图像添加到我的选择器项目？
【发布时间】：2018-01-09 09:22:30
【问题描述】：

我有一个 Picker 组件，有两种语言选择：法语和韩语。我想在每个文本组件旁边添加一个标志的图标/图片。喜欢这样的东西：

我没有看到任何关于在 documentation 中添加图标的内容除了安装 react-native-modal-dropdown 之类的东西之外，有没有办法做到这一点？我想避免安装任何额外的东西。

【问题讨论】：

我认为这 post 回答了您的问题。他在 Picker.Item 标签道具中呈现图标，但他使用的是 NativeBase 中的选择器组件。不知道这是否适用于默认的 RN 选择器好吧。

标签： react-native icons picker

【解决方案1】：

由于我自己在寻找解决方案，因此我尝试了我在之前评论中引用的解决方案，但我无法使其适用于默认的 RN 选择器。相反，我发现你可以使用 Unicode 表情符号（感谢hippietrail 的评论发现here）。因此，只需从某处复制您想要的标志表情符号（我使用emojipedia）并将其放在标签道具中。这是一个非常简单的示例，说明它是如何工作的

export default class App extends Component {
  state = {
        language: ''
  };

   render() {
     return (
       <View style={styles.container}>
           <Picker
              selectedValue={this.state.language}
              style={{ height: 50, width: 200 }}
              onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
              <Picker.Item label="??  South Korea" value="ko" />
              <Picker.Item label="??  France" value="fr" />

          </Picker>
       </View>
     );
   }
 }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

其中 ?? 和 ?? 是我从 emojipedia 复制的 unicode 表情符号。这就是它在 Android 中的样子（在 iOS 中看起来很相似）

【讨论】：

嗯，解决 RN 限制的好方法 :)