Maison  >  Article  >  interface Web  >  Explication détaillée du composant de sélection d'heure et de date open source React Native

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

巴扎黑
巴扎黑original
2017-09-15 09:12:102917parcourir

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 &#39;:react-native-datetime&#39;
project(&#39;:react-native-datetime&#39;).projectDir = new File(rootProject.projectDir, &#39;../node_modules/react-native-datetime/android&#39;)


Enregistrez le module dans MainActivity.java
...
dependencies {
  ...
  compile project(&#39;:react-native-datetime&#39;)
}

①.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
&#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, 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn