时间戳

首页 > 解决方案 > 如何避免 createStackNavigator 崩溃 react-native 应用程序？

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

问题描述

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

应用程序.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-nativereact-native-iosreact-native-navigation

解决方案

在react-navigation 安装指南中，他们提到，使用 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>
  );
}

推荐阅读