React Navigation v3 在 Expo 下不起作用

Question

我正在使用expo 来管理我的 React Native 应用程序。当我想在我的 Android 设备上加载它时，我正在使用他们来自 Play Store 的应用程序。直到今天早些时候（01.10），当我的 Android 设备上的客户端应用程序从 Play 商店自动更新时，一切都进行得很顺利。

出了什么问题？

问题是我的代码库使用的是 Expo SDK 32.0，但最新的 Android 客户端应用程序至少需要 33.0 版本的 Expo SDK。

我所做的是遵循本指南：https://docs.expo.io/versions/latest/workflow/upgrading-expo-sdk-walkthrough/#sdk-33

一切都很顺利......但不是真的。我的一些包裹遇到了一些严重的问题，事情变得一团糟。

那么，我决定下一步做什么？

本周我有一个非常重要的演示，我没有时间调查集成问题 首先，我将我的代码库恢复到原来的样子（Expo SDK 32.0），然后我决定从我的客户端应用程序中删除Android 设备并通过下载此 APK 安装旧版本：https://apkpure.com/expo/host.exp.exponent/download/103-APK

现在，我可以在设备上加载应用程序，但我遇到了与导航相关的非常奇怪的错误：

TypeError: TypeError: undefined is not an object (evaluating 'theme.label')

This error is located at:
    in HeaderTitle (at Header.tsx:220)
    in RCTView (at View.js:44)
    in AnimatedComponent (at Header.tsx:531)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AnimatedComponent (at react-native-safe-area-view/index.js:163)
    in SafeView (at withOrientation.js:54)
    in withOrientation (at Header.tsx:722)
    in RCTView (at View.js:44)
    in AnimatedComponent (at Header.tsx:714)
    in Header (at withOrientation.js:30)
    in withOrientation (at StackViewLayout.tsx:227)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at View.js:44)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:985)
    in RCTView (at View.js:44)
    in ScreenContainer (at StackViewLayout.tsx:394)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewLayout.tsx:384)
    in Handler (at StackViewLayout.tsx:377)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at View.js:44)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:430)
    in NavigationContainer (at App.js:97)
    in App (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

This error is located at:
    in NavigationContainer (at App.js:97)
    in App (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

我实现导航的方式如下：

import { createStackNavigator, createAppContainer } from 'react-navigation';

// .. other imports

const StackNavigator = createStackNavigator({
    // screen definitions
});

export default createAppContainer(StackNavigator);

我真的不明白这个错误来自哪里以及如何解决它。

更多信息：

• react-native-cli: 2.0.1
• 反应原生：0.57.1​​
• 世博会：2.6.14
• 世博会skd：32.0

我也会分享我的package.json：

{
...
  "dependencies": {
    "expo": "^32.0.0",
    "firebase": "^5.8.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-autocomplete-input": "^3.6.0",
    "react-native-check-box": "^2.1.7",
    "react-native-modal-datetime-picker": "^7.4.2",
    "react-navigation": "^3.0.9"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
...
}

当然还有 app.json：

{
  "expo": {
    "name": "qr-scanner",
    "slug": "qr-scanner",
    "privacy": "public",
    "sdkVersion": "32.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "landscape",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    ...
  }
}

在我在设备上选择了一个应该更改屏幕的选项后立即发生错误。然后涉及到导航，我收到了这个错误。

Answer 1

Expo 不久前发布了 SDK 35，如您所知，他们放弃了对旧 SDK 的支持（在本例中是 SDK 31 和 SDK 32）。

好的，查看您的 package.json 文件我没有发现问题 - 事实上我建议您升级到 SDK 35，您可以阅读所有相关信息here

关于您的问题，让我们继续升级并节省您的时间，请执行以下操作：

1. 确保您没有运行您的项目或 epxo cli 处于活动状态。
2. 通过将 sdkVersion 更改为 35.0.0 来编辑您的 app.json
3. 编辑您的package.json，如下所示：
   • react-native 到 https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz
   • expo 到 ^35.0.0
   • react 到 16.8.3
   • react-navigation 到 ^4.0.6
4. 运行expo install react-native-gesture-handler react-native-reanimated react-navigation
5. 删除您的node_modules 目录，然后运行npm install 或yarn install
6. 运行 expo start -c

现在您可以使用 expo install 来安装所需的任何 expo 依赖项，而不是旧的 npm install，它将为您的项目下载兼容的依赖项

希望对您有所帮助！