React Native 或 NativeBase Picker 可以包含包含图像的项目吗?
Can a React Native or NativeBase Picker have Items which include images?
我是智能手机编程的新手,加入了一个使用 React Native 和 NativeBase 的项目。
我想在 Picker 的每个 Item 中包含一个 image/icon,这似乎不是一个奇特的概念,但它似乎不受支持,我找不到任何人讨论在 SO 上或通过谷歌搜索。
我已经尝试了几种在 <Picker.Item>
和 </Picker.Item>
中添加东西的方法,但是放在那里的任何东西似乎都被忽略了。
是否有可能或是否有不同的方法来使用这些框架来完成我想做的事情?
你可以试试这个包
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 和 NativeBase 的项目。
我想在 Picker 的每个 Item 中包含一个 image/icon,这似乎不是一个奇特的概念,但它似乎不受支持,我找不到任何人讨论在 SO 上或通过谷歌搜索。
我已经尝试了几种在 <Picker.Item>
和 </Picker.Item>
中添加东西的方法,但是放在那里的任何东西似乎都被忽略了。
是否有可能或是否有不同的方法来使用这些框架来完成我想做的事情?
你可以试试这个包
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