简介
@nois/react-native-picker 是一个 React Native 模块，可以方便地在移动端应用中添加选择器，支持多列选择，自定义样式，以及多样化的数据类型等。本文将介绍如何在 React Native 应用中使用该 npm 包。
安装
通过 npm 包管理工具进行安装：
npm install @nois/react-native-picker --save
导入
在需要使用 @nois/react-native-picker 的文件中，导入该模块：
import Picker from '@nois/react-native-picker';
使用方式
- 一列选择的例子：
<Picker
items={['a', 'b', 'c', 'd', 'e']}
onValueChange={(value) => console.log(value)}
/>结果：
如果要设置默认值，在 Picker 标签中添加 selectedValue 属性：
<Picker
items={['a', 'b', 'c', 'd', 'e']}
selectedValue={'b'}
onValueChange={(value) => console.log(value)}
/>- 两列选择的例子：
<Picker
items={[['Nois', 'Mike', 'Peter'], ['01', '02', '03']]}
onValueChange={(value) => console.log(value)}
/>结果：
- 三列选择的例子：
<Picker
items={[['Nois', 'Mike', 'Peter'], ['01', '02', '03'], ['北京', '上海', '广州']]}
onValueChange={(value) => console.log(value)}
/>结果：
自定义样式
你也可以非常方便地自定义选择器的样式。在 Picker 标签中添加以下属性：
- pickerBg：设置选择器的背景色
- pickerFontColor：设置选择器中文本的颜色
- pickerFontSize：设置选择器中文本的字号
例如，以下代码设置选择器的背景色为灰色，中文本的颜色为白色，字号为 20：
<Picker
items={['a', 'b', 'c', 'd', 'e']}
pickerBg={'#888'}
pickerFontColor={'#fff'}
pickerFontSize={20}
onValueChange={(value) => console.log(value)}
/>数据类型
@nois/react-native-picker 支持的数据类型有以下几种：
- 数组类型（字符串或数组或对象）
items={['a', 'b', 'c', 'd', 'e']}
items={[['Nois', 'Mike', 'Peter'], ['01', '02', '03']]}
items={[{label: 'Nois', value: '1'}, {label: 'Mike', value: '2'}, {label: 'Peter', value: '3'}]}- Async promise 数据类型（异步请求数据）
items={async () => myApi.getSomeData()}- React component 数据类型（自定义组件）
items={[<CustomItem key={0} title={'title'}/>, <CustomItem key={1} title={'title'}/>, <CustomItem key={2} title={'title'}/>]}
以上内容就是关于 @nois/react-native-picker 包的使用方法介绍，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006733d890c4f72775835a0