React Native中NavigationActions.reset报错：undefined is not a function

首先咱们来定位问题：你遇到的undefined is not a function (evaluating'_reactNavigation.NavigationActions.reset')错误，核心原因是当前使用的react-navigation版本中，NavigationActions对象已经不再提供reset方法——这个API在新版本里被拆分到了专门的导航动作模块中。

下面给你两种可行的解决方案，根据你的react-navigation版本选择：

方案一：使用StackActions重置栈（适用于react-navigation v2/v3/v4） #

1. 修改导入语句
   在你的SplashScreen.js中，把原来的NavigationActions导入替换为包含StackActions的版本：

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

2. 更新跳转方法
   把navigateToWalkthrough方法里的NavigationActions.reset替换为StackActions.reset，代码如下：

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

方案二：使用replace简化跳转（适合简单场景） #

如果你的启动页栈中只有SplashScreen这一个页面，直接使用replace方法也能达到“跳转后无法返回启动页”的效果，代码更简洁：

navigateToWalkthrough = () => {
  this.props.navigation.replace("Walkthrough");
};

这种方式不需要额外导入其他模块，直接调用即可。

额外检查：确认依赖版本 #

如果上面的方法还是报错，建议你检查package.json里的react-navigation版本：

• 如果你用的是react-navigation v5+，那createStackNavigator的导入方式会变成@react-navigation/stack，并且重置栈的API会变成CommonActions.reset，需要调整代码结构；
• 如果你是低版本（v1），那NavigationActions.reset应该是可用的，可能是你安装依赖时出现了问题，建议重新安装依赖：

npm install react-navigation --save
# 或者使用yarn
yarn add react-navigation

最后给你的启动页代码提个小建议：可以把动画结束和超时跳转结合起来，比如等Lottie动画完成后再跳转，而不是固定3500毫秒，用户体验会更好，示例代码如下：

componentDidMount() {
  Animated.timing(this.state.progress, {
    toValue: 1,
    duration: 3000,
    easing: Easing.linear,
  }).start(() => {
    // 动画完成后跳转
    this.navigateToWalkthrough();
  });
}

内容的提问来源于stack exchange，提问作者Pa-won