react-native-picker-select 自定义选中所展示的内容
react native 中 使用 react-native-picker-select
组件库实现下拉选择时,在默认条件下,选择框选中内容展示为label字段。如果需要显示为value或其他字段,可以进行自定义设置。代码如下:
import RNPickerSelect from 'react-native-picker-select'; export const Dropdown = () => { const [selectedValue, setSelectedValue] = useState(''); const pickerItems = [ { label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }, { label: 'Option 3', value: 'option3' }, ]; return ( <RNPickerSelect onValueChange={(value) => setSelectedValue(value)} items={pickerItems} value={selectedValue} textInputProps={{ value: selectedValue }} // 设置选中的值为文本框的值 /> ); };
上述代码中 textInputProps 属性被用来设置文本框的属性,其中的 value 属性被设置为 selectedValue,这样就会使得文本框中显示选中的值。而 items 数组中的 label 仍然会在选择器中显示。
标签:
React Native
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· Vue3状态管理终极指南:Pinia保姆级教程