Reagieren Nativen Onboarding-Bildschirme

Was ist der beste Weg zur Umsetzung von Onboarding (oder Willkommen) auf dem Bildschirm auf React Native Anwendung? Bildschirm muss eine Schieberegler-Ansicht zu schieben zwischen Einführungs-Punkte und einige system-zum speichern "zeig mal' flag. Ich kann sehen, wie es zu implementieren, mit Vanille-code, aber es gibt wohl komplette Bauteil vorhanden ist?

InformationsquelleAutor vtambourine | 2016-03-02
  1. 5

    Ich denke reagieren-native-app-intro ist ziemlich viel, was Sie wollen. Es gibt eine grundlegende pager mit einigen netten nächsten und Erledigt Tasten standardmäßig, aber Sie können hinzufügen zusätzliche übergang Effekte, um Elemente auf jeder Seite.

    InformationsquelleAutor blackxored
  2. 4

    reagieren-native-app-intro ist eine beliebte Wahl für onboarding-aber es wird nicht mehr aktiv gepflegt. Also ich schlage vor, Sie gehen mit der reagieren-native-app-intro-regler, eine modifizierte version des vorherigen, dass unterstützt die neuesten Reagieren Naiv.

    Aber Sie behandeln soll ersten Start setup-Sie sich mittels AsyncStorage.

    Folgende Frage wird Ihnen helfen, erkennen und setup zum ersten mal starten.

    Wie zu erkennen, erste Einführung in reagieren-native

    InformationsquelleAutor syam s
  3. 3

    Ja, eine komplette Komponente vorhanden ist: https://github.com/jfilter/react-native-onboarding-swiper. (Ich bin der Autor)

    Im einfachsten Fall, Sie geben ein Bild, einen Titel und Untertitel für jede Seite.

    Für die Rettung der fahne, verwenden Sie AsyncStorage. Beim Start der main-Bildschirm, überprüfen Sie die fahne und navigieren Sie zu dem Onboarding-Bildschirm. Nach Abschluss setzen Sie das Kennzeichen, und navigieren Sie zu dem Hauptbildschirm. Siehe z.B.:

    async componentWillMount() {
  const value = await AsyncStorage.getItem('@SKIP_INTRO');
  if (value === null || value !== 'true') {
    this.props.navigateToIntro();
  }
}
    InformationsquelleAutor Johannes Filter
  4. 2

    Ich nicht finden, eine Gewohnheit, all-in-one-Komponente, aber ich denke, dass eine Kombination von ViewPagerAndroid und AsyncStorage kann den trick tun, ohne viel Aufwand (beide Klassen kommen aus dem reagieren-native-Paket).

    Beispielsweise für die Schieberegler-Ansicht, die Sie erstellen können Komponente wie folgt:

    import React, { Component, ViewPagerAndroid, View, Text } from 'react-native';

export default class Onboarding extends Component {

    render() {

        return (
          <ViewPagerAndroid style={{ flex: 1 }} initialPage={0}>
            <View style={{alignItems: 'center', padding: 20}}>
              <Text>First page</Text>
            </View>
            <View style={{alignItems: 'center', padding: 20}}>
              <Text>Second page</Text>
            </View>
          </ViewPagerAndroid>
        );

    }

}

    Und dann, für die "einmal zeigen" Flagge, die Sie verarbeiten kann es in den wichtigsten app-Komponente wie folgt:

    componentDidMount() {

  AsyncStorage.getItem('onboarding').then((val) => {

    if (!val) {
      this.setState({ onboarding: 'pending' });
      AsyncStorage.setItem('onboarding', 'done').done();
    } else {
      this.setState({ onboarding: val });
    }

  }).done();

}

render() {

  switch (this.state.onboarding) {
    case 'pending': return (<Onboarding />);
    case 'done': return (<Home />);
    default: return (<Loading />);
  };

}

    Dieser code zeigt den Onboarding-Komponente nur beim ersten mal die App ausgeführt wird. Sie könnten auch setzen Sie das flag auf "fertig" in der clic-handler eines button in die Letzte Ansicht des Schiebers, zu wiederholen, das onboarding, wenn der Benutzer nicht fertig, in der ersten Ausführung, das ist bis zu Ihnen.

    Wenn Sie auch eine iOS-version, die Sie nutzen könnten <ScrollView pagingEnabled={true}> statt der ViewPagerAndroid

    • auf einer seitlichen Anmerkung. Wenn Sie planen, schwerer Einsatz AsyncStorage ich würde vorschlagen, mit reagieren-native-einfach-store statt. Es hüllt sich die grundlegenden Funktionen von AsyncStorage - und auto-JSON.stringify und JSON.analysieren Sie die Werte für Sie. FWIW.
    InformationsquelleAutor scarmuega
  5. -2

    Können Sie gehen mit reagieren-native-app-intro-regler (anpassbare Komponente)

    InformationsquelleAutor J.plus.123
Schreibe einen Kommentar