React native 如何避免createStackNavigator在本机应用程序中崩溃？

我正在尝试使用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>
  );
}

这是我的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而不崩溃？

在app.js中，如果组件不在该文件中，则必须导入它们。此外，您还需要一个封装app.js代码的navigationContainer，指示可以导航这些区域。你需要一个事件来导航，当然，可能是一个按钮，触发事件，你需要一个功能。因此，文档中的

navigation.navigate

不起作用，但当您将其更改为

push

时，它就起作用了。但是，它只是将另一个屏幕推送到堆栈中。您没有在已创建的现有屏幕之间导航。我想说的是，去拿路由器吧。可能使用旧版本的react nav。v5似乎已损坏。

中他们提到，使用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 signature handle

：

import 'react-native-gesture-handler';

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

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

最后，您需要将整个应用程序包装在NavigationContainer中。通常，您会在条目文件（如index.js或App.js）中执行此操作：

导入“反应本机手势处理程序”；
从“React”导入*作为React；
从'@react-navigation/native'导入{NavigationContainer}；
导出默认函数App（）{
返回(
{/*应用程序代码的其余部分*/}
);
}

import 'react-native-gesture-handler';