Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erläuterung der Open-Source-Zeit- und Datumsauswahlkomponente von React Native

Ausführliche Erläuterung der Open-Source-Zeit- und Datumsauswahlkomponente von React Native

巴扎黑
巴扎黑Original
2017-09-15 09:12:102917Durchsuche

In diesem Artikel wird hauptsächlich die detaillierte Erklärung der Open-Source-Zeit- und Datumsauswahlkomponente React Native (react-native-datetime) vorgestellt, die einen gewissen Referenzwert hat. Interessierte können mehr über

Projekteinführung

Diese Komponente kapselt eine Zeit- und Datumsauswahl und ist sowohl für Android- als auch für iOS-Plattformen geeignet. Diese Komponente wurde auf Basis von @remobile/react-native-datetime-picker entwickelt

Konfiguration und Installation


npm install react-native-datetime --save

1.1. iOS-Umgebungskonfiguration

Nachdem die oben genannten Schritte abgeschlossen sind, schreiben Sie einfach js-Code direkt in die Rezeption

1.2. Konfiguration der Android-Umgebung

Konfigurieren Sie wie folgt in der Datei android/setting.gradle


...
include ':react-native-datetime'
project(':react-native-datetime').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-datetime/android')
Konfigurieren Sie Folgendes in der Datei android/app/build.gradle


...
dependencies {
  ...
  compile project(':react-native-datetime')
}
Registrieren das Modul in MainActivity.java

①.React Native>=0.18 startet


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 Version


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);
 }
 
 ......
}
Bedienungs-Screenshot


iOS-Bedienungseffekt

Android-Bedienungseffekt

Nutzungsmethode


<DateTimePicker ref={(picker)=>{this.picker=picker}}/>
...
this.picker.showDatePicker(...)
this.picker.showTimePicker(...)
this.picker.showDateTimePicker(...)
Zur Verwendung auf der iOS-Plattform müssen Sie sicherstellen, dass sich die aktuelle DataTimePicker-Ansicht befindet oben

Verwendungsbeispiel


&#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,
  },
});
Methodeneinführung

  • showDatePicker(date, callback(date))

  • showTimePicker(date, callback(date))

  • showDateTimePicker(date, callback(date))

Attributeinführung

  • cancelText (Standard: Abbrechen)

  • okText (Standard: Ok)

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Open-Source-Zeit- und Datumsauswahlkomponente von React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn