国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

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

來源:懂視網 責編:小采 時間:2020-11-27 22:30:15
文檔

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

詳解React Native開源時間日期選擇器組件(react-native-datetime):項目介紹 該組件進行封裝一個時間日期選擇器,同時適配Android、iOS雙平臺,該組件基于@remobile/react-native-datetime-picker進行開發而來 配置安裝 npm install react-native-datetime --save 1.1.iOS環境配置 上面步驟完成之
推薦度:
導讀詳解React Native開源時間日期選擇器組件(react-native-datetime):項目介紹 該組件進行封裝一個時間日期選擇器,同時適配Android、iOS雙平臺,該組件基于@remobile/react-native-datetime-picker進行開發而來 配置安裝 npm install react-native-datetime --save 1.1.iOS環境配置 上面步驟完成之

項目介紹

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

方法介紹

  • 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

    聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

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

    詳解React Native開源時間日期選擇器組件(react-native-datetime):項目介紹 該組件進行封裝一個時間日期選擇器,同時適配Android、iOS雙平臺,該組件基于@remobile/react-native-datetime-picker進行開發而來 配置安裝 npm install react-native-datetime --save 1.1.iOS環境配置 上面步驟完成之
    推薦度:
    標簽: datetime React native
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 欧美日韩在线精品一区二区三区 | 欧美日韩亚洲视频 | 亚洲欧洲视频在线 | 精品一区二区在线欧美日韩 | 久久91精品国产91久久户 | 韩日一区二区 | 欧美日本日韩aⅴ在线视频 欧美日韩91 | 最新国产区 | 成人毛片一区二区三区 | 精品国产一区二区三区免费看 | 国产成人免费在线 | 91视频国产91久久久 | 欧美αv日韩αv另类综合 | 久久青青视频 | 91精品久久久久久久久网影视 | 在线播放国产精品 | xxxwww欧美性 | 国产全黄一级毛片 | 亚洲国产精品日韩高清秒播 | 欧美理论电影在线观看 | 日本三级韩国三级欧美三级 | 亚洲 欧美 自拍 另类 欧美 | 免费a一毛片| 在线播放精品一区二区啪视频 | 日韩在线第二页 | 久久精品一区二区国产 | 国产欧美日韩综合二区三区 | 国产 日韩 欧美 在线 | 亚洲va欧美 | 免费一级a毛片在线播放视 免费一区二区 | 精品国产91乱码一区二区三区 | 中文字幕有码在线播放 | 亚洲国产一成人久久精品 | 手机国产精品一区二区 | 亚洲综合欧美日本另类激情 | 福利一区二区 | 久久久久亚洲精品美女 | 美国一级大黄大色毛片 | 亚洲国产成人精品一区二区三区 | 久久91精品国产91久久 | 国产视频资源在线观看 |