React Native 跨平台时间日期选择器 react-native-datetime 使用指南

作者：渲染笔记时间：2026-10-22 08:08:34浏览：588

本文详细介绍基于 @remobile/react-native-datetime-picker 开发的 React Native 时间日期选择器组件 react-native-datetime。内容涵盖 iOS 与 Android 双平台的完整环境配置步骤，包括 setting.gradle、build.gradle 及 MainActivity.java 的修改方法，并区分 React Native 0.18 前后版本的注册差异。此外，文章提供了 showDatePicker、showTimePicker 等核心 API 的调用示例及属性说明，帮助开发者快速集成跨平台日期时间选择功能。

项目介绍

该组件封装了一个时间日期选择器，支持 Android 和 iOS 双平台，其开发基础源自 @remobile/react-native-datetime-picker。

配置安装


npm install react-native-datetime --save

iOS环境配置

1.1.iOS环境配置

完成上述步骤后，即可在前端编写 JavaScript 代码进行调用。

Android环境配置

1.2.Android环境配置

在 android/setting.gradle 文件中添加如下配置：


...
include ':react-native-datetime'
project(':react-native-datetime').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-datetime/android')

在 android/app/build.gradle 文件中添加如下配置：


...
dependencies {
  ...
  compile project(':react-native-datetime')
}

在 MainActivity.java 中注册该模块。

①.React Native>=0.18开始


import com.keyee.datetime.*; // <--- import
 
public class MainActivity extends ReactActivity {
 ......
 
 /**
  * A list of packages used by the app. If the app uses additional views
  * or modules besides the default ones, add more packages here.
  */
  @Override
  protected List<ReactPackage> getPackages() {
   return Arrays.<ReactPackage>asList(
    new RCTDateTimePickerPackage(this), // <------ add here
    new MainReactPackage());
  }
}

①.React Native<=0.17版本


import com.keyee.datetime.*; // <--- import
 
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
 ......
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  mReactRootView = new ReactRootView(this);
 
  mReactInstanceManager = ReactInstanceManager.builder()
   .setApplication(getApplication())
   .setBundleAssetName("index.android.bundle")
   .setJSMainModuleName("index.android")
   .addPackage(new MainReactPackage())
   .addPackage(new RCTDateTimePickerPackage(this))       // <------ add here
   .setUseDeveloperSupport(BuildConfig.DEBUG)
   .setInitialLifecycleState(LifecycleState.RESUMED)
   .build();
 
  mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
 
  setContentView(mReactRootView);
 }
 
 ......
}

运行截图

ios运行效果

项目介绍

android运行效果

项目介绍

使用方法


<DateTimePicker ref={(picker)=>{this.picker=picker}}/>
...
this.picker.showDatePicker(...)
this.picker.showTimePicker(...)
this.picker.showDateTimePicker(...)

在 iOS 平台使用时，需确保当前的 DateTimePicker 视图位于界面顶层。

使用实例


'use strict';
 
var React = require('react-native');
var {
  StyleSheet,
  TouchableOpacity,
  View,
  Text,
} = React;
 
var DateTimePicker = require('react-native-datetime');
var Button = require('@remobile/react-native-simple-button');
 
module.exports = React.createClass({
  getInitialState() {
    return {
      date: new Date(),
    }
  },
  showDatePicker() {
    var date = this.state.date;
    this.picker.showDatePicker(date, (d)=>{
      this.setState({date:d});
    });
  },
  showTimePicker() {
    var date = this.state.date;
    this.picker.showTimePicker(date, (d)=>{
      this.setState({date:d});
    });
  },
  showDateTimePicker() {
    var date = this.state.date;
    this.picker.showDateTimePicker(date, (d)=>{
      this.setState({date:d});
    });
  },
  render() {
    return (
      <View style={styles.container}>
        <Text style={{textAlign: 'center'}}>
          {this.state.date.toString()}
        </Text>
        <View style={{height:40}} />
        <Button onPress={this.showDatePicker}>showDatePicker</Button>
        <View style={{height:40}} />
        <Button onPress={this.showTimePicker}>showTimePicker</Button>
        <View style={{height:40}} />
        <Button onPress={this.showDateTimePicker}>showDateTimePicker</Button>
        <DateTimePicker ref={(picker)=>{this.picker=picker}}/>
      </View>
    );
  },
});
 
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop:20,
  },
});

方法介绍

showDatePicker(date, callback(date))
showTimePicker(date, callback(date))
showDateTimePicker(date, callback(date))

属性介绍

cancelText (default: Cancel)
okText (default: Ok)

开源项目地址

开源项目地址:https://github.com/cnjon/react-native-datetime

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

React 与 Vue 3 核心差异解析：技术选型参考

2026-11-05 13:25:04

利用JS三目运算符简化React和Vue组件中的条件渲染

2026-11-05 12:50:09

Vite 与 Webpack 在 React 项目中的配置差异

2026-11-05 10:13:11

React Hooks 实战：useState 与 useEffect 使用规范

2026-11-04 18:46:10

基于 UmiJS 与 Ant Design Pro 搭建企业级中后台系统

2026-11-03 16:42:02