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

更新时间：2020-06-04 12:00:01 作者：startmvc

项目介绍该组件进行封装一个时间日期选择器,同时适配Android、iOS双平台，该组件基于@remobi

项目介绍

该组件进行封装一个时间日期选择器,同时适配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<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平台上面使用，需要确保当前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 (
 <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,
 },
});

方法介绍