探索优雅的跨平台选择列表解决方案:React Native Dropdown Select List
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import DropDown from 'react-native-dropdown';
const SelectList = ({ options, selectedValue, onSelect }) => {
const dropdownData = options.map(option => ({
label: option.label,
value: option.value,
}));
return (
<View style={styles.container}>
<DropDown
data={dropdownData}
value={selectedValue}
onChange={onSelect}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 20,
padding: 10,
},
});
export default SelectList;
这个代码示例展示了如何在React Native应用中使用react-native-dropdown
库来创建一个简单的下拉选择列表。代码中定义了一个SelectList
组件,它接收options
、selectedValue
和onSelect
属性作为输入,并使用DropDown
组件渲染下拉列表。dropdownData
是从options
属性创建的,每个选项都被转换成react-native-dropdown
需要的格式。
评论已关闭