源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-12-20 07:38 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:详解React Native开源时间日期选择器组件(react-native-datetime)
[b]项目介绍 [/b] 该组件进行封装一个时间日期选择器,同时适配Android、iOS双平台,该组件基于@remobile/react-native-datetime-picker进行开发而来 [b]配置安装[/b]
npm install react-native-datetime --save
[b]1.1.iOS环境配置[/b] 上面步骤完成之后,直接前台写js代码即可 [b]1.2.Android环境配置[/b] 在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运行效果 [img]http://files.jb51.net/file_images/article/201709/2017913144925958.png?2017813144944[/img] android运行效果 [img]http://files.jb51.net/file_images/article/201709/2017913144953250.png?201781314508[/img] 使用方法
<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,
  },
});
方法介绍 [list] [*]showDatePicker(date, callback(date))[/*] [*]showTimePicker(date, callback(date))[/*] [*]showDateTimePicker(date, callback(date))[/*] [/list] 属性介绍 [list] [*]cancelText (default: Cancel)[/*] [*]okText (default: Ok)[/*] [/list] 开源项目地址:[url=https://github.com/cnjon/react-native-datetime]https://github.com/cnjon/react-native-datetime[/url] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部