React Native 是一种基于 JavaScript 的移动应用开发框架，它使用了类似于 React 的组件模型来构建用户界面。React Native 提供了许多内置的组件，其中包括 Picker 组件，它可以用于创建下拉选择框。
在本文中，我们将学习如何使用 React Native Picker 组件来创建一个下拉选择框，并学习如何自定义它的样式。
Picker 组件的基本用法
React Native Picker 组件可以用于创建一个下拉选择框，用户可以从列表中选择一个选项。Picker 组件的基本用法如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ------ - ---- ---------------
----- -------- - -- -- -
----- --------------- ----------------- - -----------------
------ -
------
-------
-----------------------------
-------------------------- ---------- --
---------------------------
--
------------ ------------ ------------ --
------------ ------------------ ---------- --
---------
-------
--
--
------ ------- ---------上面的代码创建了一个 Picker 组件，其中包含两个 Picker.Item 组件。当用户选择一个选项时，onValueChange 回调函数会被调用，并将选项的值传递给 setSelectedValue 函数。selectedValue 变量保存了当前选中的值，它会被传递给 Picker 组件，以便在用户选择一个选项时更新视图。
Picker 组件的自定义样式
React Native Picker 组件默认的样式可能不符合你的需求。你可以使用样式对象来自定义它的样式。例如，你可以使用下面的样式对象来将 Picker 组件的背景色设置为白色，并将字体颜色设置为黑色：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ------- ---------- - ---- ---------------
----- ------ - -------------------
------- -
---------------- -------
------ -------
--
---
----- -------- - -- -- -
----- --------------- ----------------- - -----------------
------ -
------
-------
-----------------------------
-------------------------- ---------- --
---------------------------
-
----------------------
------------ ------------ ------------ --
------------ ------------------ ---------- --
---------
-------
--
--
------ ------- ---------上面的代码使用了 StyleSheet.create 函数来创建了一个样式对象 styles，它包含了一个名为 picker 的样式。这个样式会被应用到 Picker 组件上，使得它的背景色为白色，字体颜色为黑色。
你也可以使用自定义的组件来替换 Picker.Item 组件，以便更好地控制它的样式。例如，你可以使用下面的代码来创建一个自定义的 PickerItem 组件：
import React from 'react';
import { Text } from 'react-native';
const PickerItem = ({ label, value, selected }) => (
<Text style={{ color: selected ? '#000' : '#888' }}>{label}</Text>
);
export default PickerItem;上面的代码创建了一个名为 PickerItem 的组件，它接受三个参数：label、value 和 selected。根据 selected 的值，它会使用不同的颜色来渲染文本。你可以将这个组件传递给 Picker 组件，以便创建一个自定义的下拉选择框：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ------- ---------- - ---- ---------------
------ ---------- ---- ---------------
----- ------ - -------------------
------- -
---------------- -------
--
---
----- -------- - -- -- -
----- --------------- ----------------- - -----------------
------ -
------
-------
-----------------------------
-------------------------- ---------- --
---------------------------
-
---------------------
------------ ------- -- ---
----------- ------------ ------------ ----------------------- --- ------- --
----------- ------------------ ---------- ----------------------- --- ----- --
---------
-------
--
--
------ ------- ---------上面的代码使用了自定义的 PickerItem 组件，它接受了三个参数：label、value 和 selected。当 selected 的值为 true 时，PickerItem 组件会使用黑色字体渲染文本，否则会使用灰色字体渲染文本。你还可以使用 itemStyle 属性来设置 PickerItem 组件的高度。
总结
React Native Picker 组件可以用于创建下拉选择框。你可以使用默认的样式，也可以使用自定义的样式来控制它的外观。你还可以使用自定义的 PickerItem 组件来替换默认的 Picker.Item 组件，以便更好地控制它的样式。在实际开发中，你可以根据具体需求来选择使用哪种样式和组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c09c2eadd4f0e0ffa9f9fe