项目介绍
该组件进行封装一个时间日期选择器,同时适配Android、iOS双平台，该组件基于@remobile/react-native-datetime-picker进行开发而来
配置安装
1.1.iOS环境配置
1.2.Android环境配置
在android/setting.gradle文件中如下配置
在android/app/build.gradle文件中如下配置
在MainActivity.java中进行注册模块
①.React Native>=0.18开始
......
/**
- 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 ListgetPackages() {
return Arrays.asList(
new RCTDateTimePickerPackage(this),// <------ add here
new MainReactPackage());
}
}
①.React Native<=0.17版本
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运行效果
使用方法
在ios平台上面使用，需要确保当前DataTimePicker视图在顶部
使用实例
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 (
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)
