Expo React Native仅年月日期选择器：可用包及自制方案咨询

一、可用的React Native npm包 #

1. @react-native-picker/picker #

这是Expo官方兼容的选择器组件，无需 eject 或额外配置，可直接在托管工作流中使用。你可以创建两个独立的Picker组件，分别用于选择月份和年份，能完全自定义选项内容与样式，完美匹配LinkedIn工作经历的年月选择样式。

2. react-native-modal-datetime-picker #

同样兼容Expo托管工作流，可通过设置mode="date"并配合display="spinner"模式，再通过自定义逻辑隐藏日期选择部分，只保留年月选择。不过相比双Picker方案，它的自定义灵活性稍弱，但胜在模态弹窗的交互更贴近原生。

二、最快的自制实现方式 #

如果不想依赖第三方包，最快的方式是基于Expo内置的Picker组件（即@react-native-picker/picker）实现双选择器：

1. 定义月份和年份的选项数据：

const MONTHS = [
  '1月', '2月', '3月', '4月', '5月', '6月',
  '7月', '8月', '9月', '10月', '11月', '12月'
];
const getYearOptions = () => {
  const currentYear = new Date().getFullYear();
  return Array.from({ length: 20 }, (_, i) => (currentYear - i).toString());
};

2. 实现组件逻辑：

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

const MonthYearPicker = () => {
  const [selectedMonth, setSelectedMonth] = useState('1月');
  const [selectedYear, setSelectedYear] = useState(new Date().getFullYear().toString());
  const yearOptions = getYearOptions();

  return (
    <View style={styles.container}>
      <Picker
        selectedValue={selectedMonth}
        onValueChange={(itemValue) => setSelectedMonth(itemValue)}
        style={styles.picker}
      >
        {MONTHS.map(month => (
          <Picker.Item key={month} label={month} value={month} />
        ))}
      </Picker>
      <Picker
        selectedValue={selectedYear}
        onValueChange={(itemValue) => setSelectedYear(itemValue)}
        style={styles.picker}
      >
        {yearOptions.map(year => (
          <Picker.Item key={year} label={year} value={year} />
        ))}
      </Picker>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    alignItems: 'center',
  },
  picker: {
    flex: 1,
    height: 50,
  },
});

export default MonthYearPicker;

这个实现轻量、易定制，完全适配Expo托管工作流，几分钟就能完成基础功能，后续还可根据需求添加模态弹窗包装、样式优化等。

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