React Native 或 NativeBase Picker 可以有包含图像的项目吗？答案

【问题标题】：Can a React Native or NativeBase Picker have Items which include images?React Native 或 NativeBase Picker 可以有包含图像的项目吗？
【发布时间】：2018-02-04 17:08:03
【问题描述】：

我是智能手机编程新手，加入了一个使用 React Native 和 NativeBase 的项目。

我想在 Picker 的每个项目中包含一个图像/图标，这似乎不是一个奇特的概念，但它似乎不受支持，我找不到任何人讨论这样做SO或通过谷歌搜索。

我尝试了几种在 <Picker.Item> 和 </Picker.Item> 中添加内容的方法，但其中的任何内容似乎都被忽略了。

是否有可能或者是否有不同的方法可以使用这些框架来做我想做的事情？

【问题讨论】：

你的意思是像模态下拉菜单吗？ github.com/sohobloo/react-native-modal-dropdown
@GaneshCauda：如果您想提交它作为答案，那看起来与我正在寻找的完全一样。
很高兴这样做 :)，如果您在执行此操作时遇到问题，请告诉我
在我的情况下，图像是标志，我可以使用 Unicode 表情符号标志作为替代，所以我现在还不必实现它 (-:
hmmm 对我来说似乎有点进步，如果你能实现你的目标，请告诉我。我也想知道:)，祝项目好运

标签： react-native drop-down-menu icons picker native-base

【解决方案1】：

你可以试试这个包

https://github.com/sohobloo/react-native-modal-dropdown

你可以在这里查看完整的例子

https://github.com/sohobloo/react-native-modal-dropdown/blob/master/example/index.js

用途是这样的

_dropdown_2_renderRow(rowData, rowID, highlighted) {
let icon = highlighted ? require('./images/heart.png') : require('./images/flower.png');
let evenRow = rowID % 2;
return (
  <TouchableHighlight underlayColor='cornflowerblue'>
    <View style={[styles.dropdown_2_row, {backgroundColor: evenRow ? 'lemonchiffon' : 'white'}]}>
      <Image style={styles.dropdown_2_image}
             mode='stretch'
             source={icon}
      />
      <Text style={[styles.dropdown_2_row_text, highlighted && {color: 'mediumaquamarine'}]}>
        {`${rowData.name} (${rowData.age})`}
      </Text>
    </View>
  </TouchableHighlight>
);
}

最终产品示例如下所示：

所有版权属于： https://github.com/sohobloo

【讨论】：

我相信你可以使用任何 react-native 组件作为行组件，并且默认的组件应该能够加载 base64 源
让我知道如何在该 renderRow 中呈现 base64 字符串。肿瘤坏死因子。 github.com/soobloo/react-native-modal-dropdown/issues/180 。请检查这个