React Native Picker 的实现-JavaScript中文网-JavaScript教程资源分享门户

React Native 是一种基于 JavaScript 的移动应用开发框架，它使用了类似于 React 的组件模型来构建用户界面。React Native 提供了许多内置的组件，其中包括 Picker 组件，它可以用于创建下拉选择框。

在本文中，我们将学习如何使用 React Native Picker 组件来创建一个下拉选择框，并学习如何自定义它的样式。

Picker 组件的基本用法

React Native Picker 组件可以用于创建一个下拉选择框，用户可以从列表中选择一个选项。Picker 组件的基本用法如下：

import React, { useState } from 'react';
import { View, Picker } from 'react-native';

const MyPicker = () => {
  const [selectedValue, setSelectedValue] = useState('java');

  return (
    <View>
      <Picker
        selectedValue={selectedValue}
        onValueChange={(itemValue, itemIndex) =>
          setSelectedValue(itemValue)
        }>
        <Picker.Item label="Java" value="java" />
        <Picker.Item label="JavaScript" value="js" />
      </Picker>
    </View>
  );
};

export default MyPicker;

上面的代码创建了一个 Picker 组件，其中包含两个 Picker.Item 组件。当用户选择一个选项时，onValueChange 回调函数会被调用，并将选项的值传递给 setSelectedValue 函数。selectedValue 变量保存了当前选中的值，它会被传递给 Picker 组件，以便在用户选择一个选项时更新视图。

Picker 组件的自定义样式

React Native Picker 组件默认的样式可能不符合你的需求。你可以使用样式对象来自定义它的样式。例如，你可以使用下面的样式对象来将 Picker 组件的背景色设置为白色，并将字体颜色设置为黑色：

import React, { useState } from 'react';
import { View, Picker, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  picker: {
    backgroundColor: '#fff',
    color: '#000',
  },
});

const MyPicker = () => {
  const [selectedValue, setSelectedValue] = useState('java');

  return (
    <View>
      <Picker
        selectedValue={selectedValue}
        onValueChange={(itemValue, itemIndex) =>
          setSelectedValue(itemValue)
        }
        style={styles.picker}>
        <Picker.Item label="Java" value="java" />
        <Picker.Item label="JavaScript" value="js" />
      </Picker>
    </View>
  );
};

export default MyPicker;

上面的代码使用了 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 组件，以便创建一个自定义的下拉选择框：

import React, { useState } from 'react';
import { View, Picker, StyleSheet } from 'react-native';
import PickerItem from './PickerItem';

const styles = StyleSheet.create({
  picker: {
    backgroundColor: '#fff',
  },
});

const MyPicker = () => {
  const [selectedValue, setSelectedValue] = useState('java');

  return (
    <View>
      <Picker
        selectedValue={selectedValue}
        onValueChange={(itemValue, itemIndex) =>
          setSelectedValue(itemValue)
        }
        style={styles.picker}
        itemStyle={{ height: 50 }}>
        <PickerItem label="Java" value="java" selected={selectedValue === 'java'} />
        <PickerItem label="JavaScript" value="js" selected={selectedValue === 'js'} />
      </Picker>
    </View>
  );
};

export default MyPicker;

上面的代码使用了自定义的 PickerItem 组件，它接受了三个参数：label、value 和 selected。当 selected 的值为 true 时，PickerItem 组件会使用黑色字体渲染文本，否则会使用灰色字体渲染文本。你还可以使用 itemStyle 属性来设置 PickerItem 组件的高度。

总结

React Native Picker 组件可以用于创建下拉选择框。你可以使用默认的样式，也可以使用自定义的样式来控制它的外观。你还可以使用自定义的 PickerItem 组件来替换默认的 Picker.Item 组件，以便更好地控制它的样式。在实际开发中，你可以根据具体需求来选择使用哪种样式和组件。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65c09c2eadd4f0e0ffa9f9fe