android开源⽇期控件，详解ReactNative开源时间⽇期选择器组
件（react-。。。
项⽬介绍
该组件进⾏封装⼀个时间⽇期选择器，同时适配Android、iOS双平台，该组件基于@remobile/react-native-datetime-picker进⾏开发⽽来
配置安装
npm install react-native-datetime --save
1.1.iOS环境配置
上⾯步骤完成之后，直接前台写js代码即可
1.2.Android环境配置
在adle⽂件中如下配置
...
include ':react-native-datetime'
project(':react-native-datetime').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-
datetime/android')
在android/adle⽂件中如下配置
...
dependencies {
...
compile project(':react-native-datetime')
}
在MainActivity.java中进⾏注册模块
①.React Native>=0.18开始
import com.keyee.datetime.*; //
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(
reactnative原生列表new RCTDateTimePickerPackage(this), //
new MainReactPackage());
}
}
①.React Native<=0.17版本
import com.keyee.datetime.*; //
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler { ......
@Override
protected void onCreate(Bundle savedInstanceState) {
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.
setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new RCTDateTimePickerPackage(this)) //
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null); setContentView(mReactRootView);
}
......
}
运⾏截图
ios运⾏效果
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'); ports = ateClass({
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)=>{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。