Question

我希望在某些超时后将启动画面导航到下一个屏幕。启动画面有动画，在 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 />;
  }
}

任何帮助/反馈？

Answer 1

.tooltip.primary .tooltip-inner { background-color: #337ab7; } .tooltip.primary.top > .tooltip-arrow { border-top-color: #337ab7; } .tooltip.primary.right > .tooltip-arrow { border-right-color: #337ab7; } .tooltip.primary.bottom > .tooltip-arrow { border-bottom-color: #337ab7; } .tooltip.primary.left > .tooltip-arrow { border-left-color: #337ab7; } .tooltip.info .tooltip-inner { background-color: #31b0d5; } .tooltip.info.top > .tooltip-arrow { border-top-color: #31b0d5; } .tooltip.info.right > .tooltip-arrow { border-right-color: #31b0d5; } .tooltip.info.bottom > .tooltip-arrow { border-bottom-color: #31b0d5; } .tooltip.info.left > .tooltip-arrow { border-left-color: #31b0d5; } .tooltip.success .tooltip-inner { background-color: #449d44; } .tooltip.success.top > .tooltip-arrow { border-top-color: #449d44; } .tooltip.success.right > .tooltip-arrow { border-right-color: #449d44; } .tooltip.success.bottom > .tooltip-arrow { border-bottom-color: #449d44; } .tooltip.success.left > .tooltip-arrow { border-left-color: #449d44; } .tooltip.warning .tooltip-inner { background-color: #ec971f; } .tooltip.warning.top > .tooltip-arrow { border-top-color: #ec971f; } .tooltip.warning.right > .tooltip-arrow { border-right-color: #ec971f; } .tooltip.warning.bottom > .tooltip-arrow { border-bottom-color: #ec971f; } .tooltip.warning.left > .tooltip-arrow { border-left-color: #ec971f; } .tooltip.danger .tooltip-inner { background-color: #d9534f; } .tooltip.danger.top > .tooltip-arrow { border-top-color: #d9534f; } .tooltip.danger.right > .tooltip-arrow { border-right-color: #d9534f; } .tooltip.danger.bottom > .tooltip-arrow { border-bottom-color: #d9534f; } .tooltip.danger.left > .tooltip-arrow { border-left-color: #d9534f; }操作已从reset中移除，并且在反应导航的第2版中NavigationActions特定于StackNavigator。

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

支持以下操作：

重置 - 将当前状态替换为新状态

替换 - 将给定密钥的路由替换为其他路由

推送 - 在堆栈顶部添加路线，然后向前导航

Pop - 导航回以前的路线

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

Answer 2

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

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

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

undefined不是一个函数（评估'_reactNavigation.NavigationActions.reset'）

2 个答案: