React Navigation v3 не работает в Экспо - PullRequest
0 голосов
/ 01 октября 2019

Я использую expo для управления моим приложением React Native. Когда я хочу загрузить его на свое устройство Android, я использую их приложение из Play Store . Все шло отлично, пока сегодня (01.10) клиентское приложение на моем Android-устройстве не обновлялось автоматически из Play Store.

В чем проблема?

Проблема заключается в том, что моя кодовая база использует 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);

Я не очень понимаю, откуда эта ошибка и как я мог ее исправить.

Подробнее:

  • реактив-нативный-Cli: 2.0.1
  • реактив-нативный: 0,57,1
  • выставочный: 2,64
  • выставочный скд: 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"
  },
...
}

и, course 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
    },
    ...
  }
}

Ошибка возникает сразу после того, как я выбрал на устройстве параметр, который должен изменить экран. Затем включается навигация, и я получаю эту ошибку.

1 Ответ

0 голосов
/ 02 октября 2019

Expo выпустила SDK 35 не так давно, и, как вы знаете, они отказались от поддержки старых SDK (в данном случае это SDK 31 и SDK 32).

Хорошо, посмотрите на ваш файл package.jsonЯ не вижу проблемы - на самом деле я рекомендую вам обновить до SDK 35, вы можете прочитать все об этом здесь

Что касается вашей проблемы, давайте продолжим обновление и сэкономим ваше времявыполните следующие действия:

  1. Убедитесь, что вы не используете свой проект или активную систему epxo cli.
  2. Отредактируйте app.json, изменив sdkVersion на 35.0.0
  3. Отредактируйте package.json следующим образом:
  4. run 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, она загрузит совместимую зависимость для вашего компьютера. roject

Надеюсь, это поможет!

...