未定义不是函数(评估'_reactNavigation.NavigationActions.reset') [英] undefined is not a function (evaluating'_reactNavigation.NavigationActions.reset')

问题描述

我想在某个超时后将启动屏幕导航到下一个屏幕.初始屏幕上有一个动画，借助 React Native的Airbnb Lottie 完成.

I want to navigate a splash screen to next screen after certain timeout. Splash screen have an animation, done with the help of Airbnb Lottie for React Native.

启动画面代码如下:

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

我运行该应用程序后，出现以下错误:

After I run the app following errors comes up:

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

Main.js 文件如下所示:

The Main.js file looks like as follows:

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 />;
  }
}

有帮助/反馈吗?

推荐答案

reset 操作已从 NavigationActions 中删除，并且存在

reset action is removed from NavigationActions and there is StackActions specific to StackNavigator in v2 of react-navigation.

StackActions 是一个对象，其中包含用于生成操作的方法特定于基于堆栈的导航器.它的方法扩展了NavigationActions中可用的操作.

StackActions is an object containing methods for generating actions specific to stack-based navigators. Its methods expand upon the actions available in NavigationActions.

支持以下操作:

重置-用新状态替换当前状态

Reset - Replace current state with a new state

替换-用另一条路线替换给定键处的一条路线

Replace - Replace a route at a given key with another route

推送-在堆栈顶部添加一条路线，然后向前浏览

Push - Add a route on the top of the stack, and navigate forward to it

弹出-导航回到以前的路线

Pop - Navigate back to previous routes

PopToTop -导航到堆栈的顶部路线，忽略所有其他路线

PopToTop - Navigate to the top route of the stack, dismissing all other routes

这篇关于未定义不是函数(评估'_reactNavigation.NavigationActions.reset')的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！