Explication détaillée du composant de sélection d'heure et de date open source React Native

Cet article présente principalement l'explication détaillée du composant de sélection d'heure et de date open source React Native (react-native-datetime), qui a une certaine valeur de référence. Ceux qui sont intéressés peuvent en savoir plus sur

<.>Introduction au projet

Ce composant encapsule un sélecteur d'heure et de date et est adapté aux plateformes Android et iOS. Ce composant est développé sur la base de @remobile/react-native-datetime-picker.

Configuration et installation

npm install react-native-datetime --save

Configuration de l'environnement iOS

Après avoir terminé les étapes ci-dessus, écrivez simplement le code js directement à la réception

1.2 Configuration de l'environnement Android

Configurez comme suit dans le fichier android/setting.gradle <. 🎜>

Configurez les éléments suivants dans le fichier android/app/build.gradle

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

Enregistrez le module dans MainActivity.java

...
dependencies {
  ...
  compile project(':react-native-datetime')
}

①.React Native>=0.18 démarre

①.React Native<=0.17 version

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());
  }
}

Capture d'écran du fonctionnement

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

Effet de fonctionnement iOS

Effet de fonctionnement Android

Méthode d'utilisation

Pour utiliser sur la plateforme iOS, vous devez vous assurer que la vue DataTimePicker actuelle est en haut

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

Exemple d'utilisation

Introduction à la méthode

'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: &#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, rappel(date))
showDateTimePicker(date, rappel(date))
Introduction à l'attribut

cancelText (par défaut : Annuler)
okText (par défaut : Ok)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!