詳解React Native開源時間日期選擇器組件(react-native-datetime)

2019-11-19 15:27:55

字體：大中小

來源：轉載

供稿：網友

項目介紹

該組件進行封裝一個時間日期選擇器,同時適配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,  },});

方法介紹