React Native开源时间日期选择器组件的有关详解

本篇文章主要介绍了详解react native开源时间日期选择器组件(react-native-datetime)，具有一定的参考价值，有兴趣的可以了解一下

项目介绍

该组件进行封装一个时间日期选择器,同时适配Android、iOS双平台，该组件基于@remobile/react-native-datetime-picker进行开发而来

配置安装

npm install react-native-datetime --save

1.1.iOS环境配置

上面步骤完成之后，直接前台写js代码即可

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 getPackages() {
   return Arrays.asList(
    new RCTDateTimePickerPackage(this), // <------ add here
    new MainReactPackage());
  }
}

①.React Native

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运行效果

Javashop

Javashop是基于 Java技术构建的开源网店系统，其特色是组件机制和模板引擎让扩展变得简单，可有第三方组件可供选择，降低二次开发成本。同时 Javashop推出 “ 第三方开发者合作共赢计划 ”，依托计时软件有效计算开发费用，期望在实现双赢的基础上走出我们国人自己开源模式 ，详见 ：Javashop第三方开发者合作共赢计划Javashop v3.0 升级日志：一、机制1. 完善组件机制，更易

下载

android运行效果

使用方法

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

在ios平台上面使用，需要确保当前DataTimePicker视图在顶部

使用实例

'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 (
      
        
          {this.state.date.toString()}
        
        
        showDatePicker
        
        showTimePicker
        
        showDateTimePicker
        {this.picker=picker}}/>
      
    );
  },
});
 
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)