React Navigation v3在Expo下不起作用

Question

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

出什么问题？

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

我所做的是遵循本指南：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
• expo 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更改为app.json编辑您的35.0.0
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. Run expo start -c

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

希望有帮助！