能否在<View>内使用多个<Picker>？如何获取不同<Picker>的选中值？

当然可以在<View>组件内部使用多个<Picker>组件！<View>作为React Native最基础的容器组件，核心作用就是承载和布局多个子组件，不管是Picker、TextInput还是其他UI组件，都可以毫无问题地嵌套在里面。

至于如何区分并获取不同Picker的选中值，核心思路是给每个Picker绑定独立的状态字段，或者通过统一的处理函数结合标识来管理，下面给你两种常用的实现方案：

方案1：为每个Picker单独绑定状态和处理函数 #

这种方法适合Picker数量不多的场景，逻辑直观，容易维护：

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

class MultiPickerDemo extends Component {
  // 初始化每个Picker对应的状态
  state = {
    fruitPickerValue: 'apple',
    colorPickerValue: 'red'
  };

  // 第一个Picker的选中值变化处理函数
  handleFruitChange = (selectedValue) => {
    this.setState({ fruitPickerValue: selectedValue });
    // 这里可以直接拿到当前水果Picker的选中值做后续处理
    console.log('选中的水果：', selectedValue);
  };

  // 第二个Picker的选中值变化处理函数
  handleColorChange = (selectedValue) => {
    this.setState({ colorPickerValue: selectedValue });
    console.log('选中的颜色：', selectedValue);
  };

  render() {
    return (
      <View style={styles.container}>
        {/* 水果选择Picker */}
        <Picker
          selectedValue={this.state.fruitPickerValue}
          onValueChange={this.handleFruitChange}
          style={styles.picker}
        >
          <Picker.Item label="苹果" value="apple" />
          <Picker.Item label="香蕉" value="banana" />
          <Picker.Item label="橙子" value="orange" />
        </Picker>

        {/* 颜色选择Picker */}
        <Picker
          selectedValue={this.state.colorPickerValue}
          onValueChange={this.handleColorChange}
          style={styles.picker}
        >
          <Picker.Item label="红色" value="red" />
          <Picker.Item label="黄色" value="yellow" />
          <Picker.Item label="橙色" value="orange" />
        </Picker>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  picker: {
    height: 50,
    width: '100%',
    marginVertical: 10,
  }
});

export default MultiPickerDemo;

方案2：用统一的状态对象和处理函数管理多个Picker #

当你需要使用3个及以上的Picker时，这种方法会更简洁，避免重复代码：

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

class MultiPickerDemo extends Component {
  // 用一个对象统一管理所有Picker的状态
  state = {
    pickerValues: {
      fruit: 'apple',
      color: 'red',
      size: 'medium'
    }
  };

  // 统一的处理函数，通过pickerKey区分不同的Picker
  handlePickerChange = (pickerKey, selectedValue) => {
    this.setState(prevState => ({
      pickerValues: {
        ...prevState.pickerValues,
        [pickerKey]: selectedValue
      }
    }));
    // 根据pickerKey判断是哪个Picker的变化
    console.log(`选中的${pickerKey}：`, selectedValue);
  };

  render() {
    const { pickerValues } = this.state;
    return (
      <View style={styles.container}>
        <Picker
          selectedValue={pickerValues.fruit}
          onValueChange={(value) => this.handlePickerChange('fruit', value)}
          style={styles.picker}
        >
          <Picker.Item label="苹果" value="apple" />
          <Picker.Item label="香蕉" value="banana" />
          <Picker.Item label="橙子" value="orange" />
        </Picker>

        <Picker
          selectedValue={pickerValues.color}
          onValueChange={(value) => this.handlePickerChange('color', value)}
          style={styles.picker}
        >
          <Picker.Item label="红色" value="red" />
          <Picker.Item label="黄色" value="yellow" />
          <Picker.Item label="橙色" value="orange" />
        </Picker>

        <Picker
          selectedValue={pickerValues.size}
          onValueChange={(value) => this.handlePickerChange('size', value)}
          style={styles.picker}
        >
          <Picker.Item label="小" value="small" />
          <Picker.Item label="中" value="medium" />
          <Picker.Item label="大" value="large" />
        </Picker>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  picker: {
    height: 50,
    width: '100%',
    marginVertical: 10,
  }
});

export default MultiPickerDemo;

两种方案的核心都是让每个Picker对应独立的状态字段，这样就能精准区分每个Picker的选中值啦。你可以根据自己的Picker数量和项目需求选择合适的方式。

内容的提问来源于stack exchange，提问作者Faisal Ahmed