Can a React Native or NativeBase Picker have Items which include images?

房东的猫 提交于 2019-12-07 17:34:18

问题


I'm new to smartphone programming and have joined a project using React Native and NativeBase.

I'd like to include an image/icon in each Item in a Picker, which doesn't seem like an exotic concept, but it doesn't seem to be supported and I can't find anyone discussing doing it on SO or by Googling.

I've tried a couple ways of adding things inside the <Picker.Item> and </Picker.Item> but anything put there seems to simply be ignored.

Is it possible or is there a different approach to do what I want using these frameworks?


回答1:


You can try this package

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

the complete example you can check here

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

the use is something like this

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

the end product example is look like this :

all copyrights belongs to : https://github.com/sohobloo



来源:https://stackoverflow.com/questions/45901897/can-a-react-native-or-nativebase-picker-have-items-which-include-images

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!