react-native-show-picker

English

轻量的 React Native Picker集合 纯js实现，包含：

• 地址选择器（省市区）
• 日期时间选择器（支持 11 种 mode）
• 通用级联选择器

安装

npm install react-native-show-picker --save

或

yarn add react-native-show-picker

快速开始

下面示例基于页面内直接调用，包含地址、时间、级联三个入口。

示例截图

| DatePicker | CascaderPicker | | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | | |

code

import { useScreenOptions } from '@aks-dev/react-navigation-helper';
import React from 'react';
import {
  Dimensions,
  StyleSheet,
  TouchableOpacity,
  View,
  Text,
} from 'react-native';
import {
  Picker,
  showAddressPicker,
  showDatePicker,
  DatePickerModal,
  DatePickerModalImperativeHandle,
  showCascaderPicker,
} from 'react-native-show-picker';
import data from './components/province-city-area.json';
console.log('data', data);
export default ({ navigation, route }) => {
  useScreenOptions(
    {
      title: 'animateView',
    },
    [],
  );
  const [address, setAddress] = React.useState({
    provinceIndex: 2,
    cityIndex: 1,
    areaIndex: 0,
  });

  // const datePickerRef = React.useRef<DatePickerModalImperativeHandle>(null);

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.complete}
        onPress={async () => {
          let value = await showAddressPicker({
            provinceIndex: 5,
            cityIndex: 2,
            areaIndex: 2,
          });
          console.log(value);
        }}
      >
        <Text>地址</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={[styles.complete, { left: 100 }]}
        onPress={async () => {
          let value = await showDatePicker({
            mode: 'YYYY-MM-DD A',
            value: '2026-04-07 16:10:01',
          });

          // let value = await datePickerRef.current?.showDatePicker({
          //   mode: 'YYYY-MM-DD hh:mm:ss',
          //   value: '2026-04-07 16:10:01',
          // });
          console.log(value);
        }}
      >
        <Text>时间</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={[styles.complete, { left: 200 }]}
        onPress={async () => {
          let value = await showCascaderPicker({
            data,
          });
          console.log(value);
        }}
      >
        <Text>级联选择器</Text>
      </TouchableOpacity>

      <Picker />
      {/* <DatePickerModal ref={datePickerRef}></DatePickerModal> */}
    </View>
  );
};
const styles = StyleSheet.create({
  ...
});

API 简述

showAddressPicker(options)

• 入参：provinceIndex、cityIndex、areaIndex
• 返回：Promise<AddressValue | undefined>

用户点击确定返回地址结果；取消时返回 undefined。

showDatePicker(options)

• 常用入参：mode、value、yearsBefore、yearsAfter
• 返回：Promise<string | undefined>

支持 showDatePicker(options) 直接调用，也支持 DatePickerModal + ref 命令式调用。

• 支持的 mode 如下：

| 日期相关 | 时间相关 | 组合模式 | | ------------ | ---------- | --------------------- | | YYYY | hh:mm | YYYY-MM-DD hh:mm:ss | | YYYY-MM | hh:mm:ss | YYYY-MM-DD hh:mm | | YYYY-MM-DD | | YYYY-MM-DD hh | | MM-DD | | YYYY-MM-DD A | | | | A hh:mm |

showCascaderPicker(options)

• 常用入参：data、value、level、itemKey
• 返回：Promise<CascaderPickerValue | undefined>

CascaderPickerValue 结构：

• indices: 当前选中路径的索引数组
• selectedOptions: 当前选中路径节点数组（已移除 children 字段）

建议

• 在页面根部保留 <Picker />，用于挂载全局弹层。
• 如需复用时间弹窗，推荐使用 <DatePickerModal ref={...} />。
• 级联数据建议保证每一层节点结构一致（通过 itemKey 映射）。