React Native或NativeBase Picker可以包含包含图像的项吗?

时间:2017-08-27 05:17:05

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

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

我想在Picker中的每个项目中加入一个图像/图标,这看起来不像是一个充满异国情调的概念,但它似乎并没有被支持,我可以&#39找不到任何人讨论在SO上或谷歌搜索。

我已尝试过几种方法在<Picker.Item></Picker.Item>中添加内容,但放在那里的任何内容似乎都会被忽略。

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

1 个答案:

答案 0 :(得分:6)

你可以试试这个包

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

最终产品示例如下所示:

enter image description here

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