推荐使用:React Native Chooser - 简洁高效的下拉选择组件
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const Chooser = ({ options, selected, onSelect }) => {
const renderOptions = () => {
return options.map(option => {
const isSelected = option.value === selected;
return (
<Text
key={option.value}
style={[styles.option, isSelected && styles.optionSelected]}
onPress={() => onSelect(option.value)}
>
{option.label}
</Text>
);
});
};
return (
<View style={styles.container}>
{renderOptions()}
</View>
);
};
const styles = StyleSheet.create({
container: {
// 样式定义了容器的样式
},
option: {
// 样式定义了选项的基本样式
},
optionSelected: {
// 样式定义了选中选项的样式
}
});
export default Chooser;
这个代码实例提供了一个简单的下拉选择组件,可以被用于React Native应用中。它接受一个选项数组,其中包含标签和值,以及一个选中的值和一个选择变更的处理函数。它使用React Native的StyleSheet来定义样式,并使用函数组件和hooks。
评论已关闭