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

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

项目介绍

该组件进行封装一个时间日期选择器,同时适配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<=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运行效果

使用方法

{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});

});

},

showTimePcUnkWPeFicker() {

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)

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。