详解React Native开源时间日期选择器组件(react-native-datetime)

项目介绍

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

配置安装

rush:bash;"> npm install react-native-datetime --save

1.1.iOS环境配置

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

1.2.Android环境配置

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

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

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

rush:plain;"> ... dependencies { ... compile project(':react-native-datetime') }

在MainActivity.java中进行注册模块

①.React Native>=0.18开始

rush:java;"> 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<=0.17版本

rush:java;"> 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运行效果

使用方法

rush:js;"> {this.picker=picker}}/> ... this.picker.showDatePicker(...) this.picker.showTimePicker(...) this.picker.showDateTimePicker(...)

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

使用实例

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,showDateTimePicker() {
var date = this.state.date;
this.picker.showDateTimePicker(date,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)

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

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