web-dev-qa-db-ja.com

undefinedは関数ではありません（ '_reactNavigation.NavigationActions.reset'を評価する）

特定のタイムアウト後にスプラッシュ画面から次の画面に移動したい。スプラッシュスクリーンにはアニメーションがあり、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}
      />
    );
  }
}

アプリを実行すると、次のエラーが表示されます。

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

Main.jsファイルは次のようになります。

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

ヘルプ/フィードバックはありますか？

javascriptreact-nativelottie
9
Pa-won

resetアクションはNavigationActionsから削除され、react-navigationのv2のStackActionsに固有の StackNavigator があります。

StackActionsは、スタックベースのナビゲーターに固有のアクションを生成するメソッドを含むオブジェクトです。そのメソッドは、NavigationActionsで使用可能なアクションを拡張します。

次のアクションがサポートされています。

Reset-現在の状態を新しい状態に置き換えます

Replace-指定されたキーのルートを別のルートに置き換えます

Push-スタックの一番上にルートを追加し、そこに進みます

Pop-前のルートに戻る

PopToTop-スタックの一番上のルートに移動し、他のすべてのルートを閉じます

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