React Native Dropdown Picker切换选项渲染对应复选框组方案

问题原因 #

@react-native-picker/picker的selectedValue和Picker.Item的value属性仅支持字符串、数字这类可序列化的基础类型值，直接传入React组件/组件调用返回的JSX对象，渲染时就会被转成[object Object]的异常文本。
正确实现逻辑是：用picker的value存储视图类型标识，根据当前选中的标识条件渲染对应复选框组组件。

具体实现步骤 #

• 先补全DailyView日视图组件，结构和已有的HourlyView保持一致，替换为日维度的气象指标复选框即可
• 给选择状态设置默认初始值，避免首次进入页面时下方内容区空白
• 保持Picker.Item的value为基础类型字符串，不要传入组件
• 在内容区根据当前选中的状态值，判断渲染对应的视图组件

修正后完整代码 #

import React, { useState } from 'react';
import { StyleSheet, View, Text, CheckBox } from 'react-native';
import { Picker } from '@react-native-picker/picker';

// 小时视图复选框组
const HourlyView = () => {
  return (
    <View style={styles.checkboxGroup}>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>Temperature (2m)</Text>
      </View>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>Relative Humidity (2m)</Text>
      </View>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>Dewpoint (2m)</Text>
      </View>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>Apparent Temperature</Text>
      </View>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>Sealevel Pressure</Text>
      </View>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>Precipitation</Text>
      </View>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>Weathercode</Text>
      </View>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>Snow Depth</Text>
      </View>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>Freezinglevel Height</Text>
      </View>
    </View>
  );
};

// 补全日视图复选框组
const DailyView = () => {
  return (
    <View style={styles.checkboxGroup}>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>Max Temperature (2m)</Text>
      </View>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>Min Temperature (2m)</Text>
      </View>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>Sunrise Time</Text>
      </View>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>Sunset Time</Text>
      </View>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>Precipitation Sum</Text>
      </View>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>Max Wind Speed</Text>
      </View>
      <View style={styles.checkboxItem}>
        <CheckBox />
        <Text>UV Index</Text>
      </View>
    </View>
  );
};

const Details = () => {
  // 设置默认选中小时视图，避免首次加载空白
  const [choosedValue, setChoosedValue] = useState('hourly');

  // 根据选中值返回对应要渲染的组件
  const renderContent = () => {
    switch(choosedValue) {
      case 'hourly':
        return <HourlyView />;
      case 'daily':
        return <DailyView />;
      default:
        return null;
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.containerTitle}>Meteorologic data for City</Text>

      <Picker
        selectedValue={choosedValue}
        style={styles.dropdownSelect}
        onValueChange={(itemValue) => {
          setChoosedValue(itemValue);
        }}
      >
        <Picker.Item label="Hourly View（小时视图）" value="hourly" />
        <Picker.Item label="Daily View（日视图）" value="daily" />
      </Picker>

      {/* 直接渲染对应内容即可，不要把状态值直接输出在这里 */}
      <View style={styles.contentArea}>
        {renderContent()}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    paddingTop: 20,
  },
  containerTitle: {
    fontWeight: 'bold',
    textAlign: 'center',
    fontSize: 28,
    paddingTop: 30,
    color: '#51697f',
  },
  dropdownSelect: {
    height: 50,
    width: 250,
    marginVertical: 20,
  },
  contentArea: {
    width: '90%',
  },
  checkboxGroup: {
    gap: 12,
  },
  checkboxItem: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  }
});

export default Details;

优化提示 #

• 如果后续还要加周视图、月视图这类同类结构的复选框组，不用重复写组件，直接把每个视图的复选框文案抽成配置数组，写一个通用的复选框组组件，传入对应配置就能渲染，减少重复代码
• 如果你用的React Native版本≥0.64，内置的CheckBox组件已经被移除，运行报错的话直接安装@react-native-community/checkbox包，替换导入来源即可

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