web-dev-qa-db-fra.com

undefined n'est pas une fonction (évaluation de'_reactNavigation.NavigationActions.reset ')

Je veux passer d'un écran de démarrage à l'écran suivant après un certain délai d'expiration. L'écran de démarrage possède une animation, réalisée à l'aide de Airbnb Lottie for React Native.

Le code de l'écran de démarrage se présente comme suit:

import React from "react";
import { Animated, Easing } from "react-native";
import LottieView from "lottie-react-native";
import { NavigationActions } from "react-navigation";

export default class SplashScreen extends React.Component {
  static navigationOptions = {
    header: null
  };

  constructor() {
    super();
    this.state = {
      progress: new Animated.Value(0),
    }
  }

  componentDidMount() {
    setTimeout(() => {
      this.navigateToWalkthrough()
    }, 3500);
    
    Animated.timing(this.state.progress, {
      toValue: 1,
      duration: 3000,
      easing: Easing.linear,
    }).start();
  }

  navigateToWalkthrough = () => {
    const navigateAction = NavigationActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: "Walkthrough" })],
    });

    this.props.navigation.dispatch(navigateAction);
  }

  render() {
    return(
      <LottieView 
      source={require("../assets/splash/SplashScreenAnimation.json")}
      progress={this.state.progress}
      />
    );
  }
}

Après avoir exécuté l'application, les erreurs suivantes apparaissent:

undefined is not a function (evaluating'_reactNavigation.NavigationActions.reset')

Le Main.js le fichier ressemble à ceci:

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator } from "react-navigation";

import SplashScreen from "./screens/SplashScreen";
import Walkthrough from "./screens/Walkthrough";

const Routes = createStackNavigator({
  Home: {
    screen: SplashScreen
  },
  Walkthrough: {
    screen: Walkthrough
  }
});

export default class Main extends React.Component {
  render() {
    return <Routes />;
  }
}

Avez-vous de l'aide/des commentaires?

javascriptreact-nativelottie
9
Pa-won

reset l'action est supprimée de NavigationActions et il y a StackActions spécifique à StackNavigator dans la v2 de react-navigation.

StackActions est un objet contenant des méthodes pour générer des actions spécifiques aux navigateurs basés sur la pile. Ses méthodes développent les actions disponibles dans NavigationActions.

Les actions suivantes sont prises en charge:

Réinitialiser - Remplacer l'état actuel par un nouvel état

Remplacer - Remplacer un itinéraire à une clé donnée par un autre itinéraire

Poussez - Ajoutez un itinéraire en haut de la pile et accédez-y

Pop - Revenez aux itinéraires précédents

PopToTop - Accédez à la route supérieure de la pile, en ignorant toutes les autres routes

18
bennygenel
import { StackActions, NavigationActions } from 'react-navigation';

navigateToWalkthrough = () => {
  const navigateAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: "Walkthrough" })],
  });

  this.props.navigation.dispatch(navigateAction);
}
9
Mahdi Bashirpour