如何避免 createStackNavigator 崩溃 react-native 应用程序？答案

【问题标题】：How to avoid having createStackNavigator crash react-native app?如何避免 createStackNavigator 崩溃 react-native 应用程序？
【发布时间】：2021-01-26 01:33:31
【问题描述】：

我正在尝试使用 createStackNavigator 实现基本的堆栈导航：

App.js

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

当我在我的 Mac (Big Sur) 上运行此程序时，我在 Metro 控制台中收到此错误：

[Mon Jan 25 2021 19:21:42.268]  BUNDLE  ./index.js 

[Mon Jan 25 2021 19:21:44.595]  ERROR    TypeError: null is not an object (evaluating '_RNGestureHandlerModule.default.Direction')
[Mon Jan 25 2021 19:21:44.596]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
[Mon Jan 25 2021 19:21:45.600]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

这是我的 package.json：

{
  "name": "stack_navigation",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-navigation/stack": "^5.14.2",
    "react": "16.13.1",
    "react-native": "0.63.4"
  },
  "devDependencies": {
    "@babel/core": "7.12.10",
    "@babel/runtime": "7.12.5",
    "@react-native-community/eslint-config": "1.1.0",
    "babel-jest": "25.5.1",
    "eslint": "6.8.0",
    "jest": "25.5.4",
    "metro-react-native-babel-preset": "0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

我有什么办法可以在不崩溃的情况下使用 createStackNavigator 吗？

【问题讨论】：

标签： react-native react-native-ios react-native-navigation

【解决方案1】：

在react-navigation installation guide 他们提到，使用 react 导航你还必须安装一些其他依赖项。

所以首先使用 react-natvigation 安装这些库：

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

如果你在android上自动链接会自动完成，如果你在ios上你必须运行：

pod install

现在，在 app.js 或 index.js 中的文件顶部导入 react-native-gesture-handle：

import 'react-native-gesture-handler';

如文档所述，您必须这样做，如果您正在为 android 或 ios 构建应用程序，则不能跳过此安装步骤：

注意：如果您正在为 Android 或 iOS 构建，请不要跳过此步骤，否则您的应用可能会在生产中崩溃，即使它在开发中运行良好。这不适用于其他平台。

最后，您需要将整个应用程序包装在 NavigationContainer 中。通常你会在你的入口文件中这样做，例如 index.js 或 App.js：

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

【讨论】：

【解决方案2】：

在 app.js 中，如果组件不存在于该文件中，则必须导入它们。您还需要一个封装 app.js 代码的 navigationContainer，指示这些区域可以导航。当然，您将需要一个事件来导航，也许是一个按钮来触发该事件，并且您将需要一个函数。因此，文档中的 navigation.navigate 不起作用，但是当您将其更改为 push 时，它会起作用。但是，它只是将另一个屏幕推送到您的堆栈中。您不是在您创建的现有屏幕之间导航。我会说只是去反应路由器。也许使用旧版本的 react-nav。 v5 好像坏了。

【讨论】：