React Native或NativeBase的Picker组件是否支持包含图像的选项？

Question

我刚接触智能手机编程，并加入了一个使用React Native和NativeBase的项目。

我想在Picker中的每个Item中包含一个图像/图标，这似乎并不是什么奇怪的概念，但似乎不受支持，我无法在SO或Google中找到任何讨论如何实现它的内容。

我尝试过在和之间添加内容，但放置在那里的任何内容似乎都被忽略了。

是否可能实现我的想法，或者使用这些框架有不同的方法？

- hippietrail

---

你是指类似于模态下拉框吗？https://github.com/sohobloo/react-native-modal-dropdown - Ganesh Cauda

@GaneshCauda：如果你想将它作为答案提交，那看起来正是我所寻找的。 - hippietrail

非常高兴能够帮忙 :)，如果您在实现这个过程中遇到问题，请告诉我。 - Ganesh Cauda

在我的情况下，这些图像是旗帜，我能够使用Unicode表情符号作为替代方案，所以我不必立即实现它。 (-: - hippietrail

嗯，这似乎对我来说有些高级，请让我知道您是否能够实现您的目标。 我也想知道：），祝您的项目好运。 - Ganesh Cauda

请告诉我如何在 renderRow 中呈现 base64 字符串。谢谢。 https://github.com/sohobloo/react-native-modal-dropdown/issues/180 - Kartiikeya

Answer 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

- Ganesh Cauda

---

我相信您可以使用任何React Native组件作为行组件，并且默认的<Image/>组件应该能够加载base64源。 - Ganesh Cauda

请告诉我如何在 renderRow 中呈现 base64 字符串。谢谢。 github.com/sohobloo/react-native-modal-dropdown/issues/180 请查看此链接。 - Kartiikeya