首頁 > web前端 > js教程 > React Native開源時間日期選擇器元件的相關詳解

React Native開源時間日期選擇器元件的相關詳解

巴扎黑
發布: 2017-09-15 09:12:10
原創
3039 人瀏覽過

本篇文章主要介紹了詳解React Native開源時間日期選擇器元件(react-native-datetime),具有一定的參考價值,有興趣的可以了解一下

##專案介紹

此元件進行封裝一個時間日期選擇器,同時適配Android、iOS雙平台,該元件基於@remobile/react-native-datetime-picker進行開發而來

設定安裝


1

npm install react-native-datetime --save

登入後複製

#1.1.iOS環境設定

上面步驟完成之後,直接前台寫js程式碼即可

1.2.Android環境設定

#在android/setting.gradle檔案中如下設定


1

2

3

...

include ':react-native-datetime'

project(':react-native-datetime').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-datetime/android')

登入後複製

在android/app/build.gradle檔案中如下配置


#

1

2

3

4

5

...

dependencies {

  ...

  compile project(':react-native-datetime')

}

登入後複製

在MainActivity.java中進行註冊模組

#①.React Native>=0.18開始


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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版本


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

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運行效果

使用方法



  • #

    1

    2

    3

    4

    5

    <DateTimePicker ref={(picker)=>{this.picker=picker}}/>

    ...

    this.picker.showDatePicker(...)

    this.picker.showTimePicker(...)

    this.picker.showDateTimePicker(...)

    登入後複製
  • 在ios平台上面使用,需要確保目前DataTimePicker視圖在頂部
  • 使用實例

###

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

&#39;use strict&#39;;

  

var React = require(&#39;react-native&#39;);

var {

  StyleSheet,

  TouchableOpacity,

  View,

  Text,

} = React;

  

var DateTimePicker = require(&#39;react-native-datetime&#39;);

var Button = require(&#39;@remobile/react-native-simple-button&#39;);

  

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: &#39;center&#39;}}>

          {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: &#39;center&#39;,

    paddingTop:20,

  },

});

登入後複製
###方法介紹# ###########showDatePicker(date, callback(date))############showTimePicker(date, callback(date))######### ###showDateTimePicker(date, callback(date))#############屬性介紹############cancelText (default: Cancel)###### ######okText (default: Ok)##########

以上是React Native開源時間日期選擇器元件的相關詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板