React-Navigation с Onboarding не очень хорошо играет

Question

спасибо, что прочитали это!

Я пытаюсь добавить поток Onboarding в мое приложение, но всякий раз, когда я добавляю AppOnboardingNavigation в качестве корневого компонента ReduxNavigation, мое приложение вылетает, говоря:

Я действительно не могу понять, почему это происходит, какие-нибудь идеи?Спасибо!

AppNavigation.js:

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

import styles from './Styles/NavigationStyles'

import MainTabNavigation from "./MainTabNavigation";
import DrinkCheckinNavigation from "./DrinkCheckinNavigation";

// Manifest of possible screens
const PrimaryNav = createStackNavigator({
  MainScreen: {
    screen: MainTabNavigation,
    navigationOptions: {
      header: null
    }
  },
  DrinkDetailScreen: {
    screen: DrinkCheckinNavigation,
    navigationOptions: {
      title: 'Drink selecionado'
    }
  },
}, {
  initialRouteName: 'MainScreen',
  navigationOptions: {
    headerStyle: styles.header
  },
})

export default createAppContainer(PrimaryNav)

MainTabNavigation.js:

import React from 'react'
import { createAppContainer, createBottomTabNavigator } from 'react-navigation'
import HistoryScreen from '../Containers/CustomerHistory'
import { Icon } from 'react-native-elements'

import SwitchNav from './LoginSwitchNavigation'
import PlacesNav from "./PlaceStackNavigation";
import styles from './Styles/NavigationStyles'

// Manifest of possible screens
const PrimaryNav = createBottomTabNavigator({
  PlacesScreen: { screen: PlacesNav, },
  HistoryScreen: { screen: HistoryScreen },
  LoginScreen: { screen: SwitchNav },
}, {
    headerMode: 'none',
    initialRouteName: 'PlacesScreen',
    navigationOptions: {
      headerStyle: styles.header
    },
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;

        switch (routeName) {
          case 'PlacesScreen':
            iconName = 'local-drink'
            break;
          case 'HistoryScreen':
            iconName = 'history'
            break;
          case 'LoginScreen':
            iconName = 'person'
            break;
        }

        return <Icon name={iconName} size={25} color={tintColor} />;
      },
    }),
  })

export default createAppContainer(PrimaryNav)

AppOnboardingNavigation.js:

import {
  createSwitchNavigator,
  createAppContainer
} from 'react-navigation'

import OnboardingScreen from "../Containers/OnboardingScreen";
import AppNavigation from "./AppNavigation";
import LaunchOnboardingScreen from "../Containers/LaunchOnboardingScreen";

export default createAppContainer(createSwitchNavigator({
  OnboardingScreen: OnboardingScreen,
  LaunchOnboardingScreen: LaunchOnboardingScreen,
  AppNavigationScreen: AppNavigation,
}, {
  initialRouteName: 'LaunchOnboardingScreen'
}))

ReduxNavigation.js:

import AppNavigation from './AppOnboardingNavigation' <-- Here is the problem, if I change to AppNavigation it works...

createReactNavigationReduxMiddleware(
  (state) => state.nav,
  'root',
)

const ReduxAppNavigator = createReduxContainer(AppNavigation, 'root')

const ReduxNavigation = (props) => {

  return <ReduxAppNavigator dispatch={props.dispatch} state={props.nav} />
}

Управление версиями:

"react": "16.8.3",
"react-native": "0.59.4",
"react-navigation": "3.8.1",
"react-navigation-redux-helpers": "^3.0.2",
"react-redux": "^6.0.0",
"redux": "^4.0.1"

Спасибо:)

Answer 1

На самом деле я решил это так:

Полное удаление AppOnboardingNavigation.js.

Новый файл LaunchOnboardingScreen.js:

import React, { useEffect } from "react";
import { useAsyncStorage } from "@react-native-community/async-storage";
import { View, ActivityIndicator } from 'react-native'
import { shouldShowOnboarding } from "../Utils/OnboardingUtils";
import { withNavigation } from "react-navigation";


const LaunchOnboardingScreen = (props) => {
    checkIfShouldShowOnboarding = async () => {
        const showOnboarding = await shouldShowOnboarding()

        if (showOnboarding) {
            props.navigation.replace('OnboardingScreen')
        } else {
            props.navigation.replace('MainScreen')
        }
    }

    checkIfShouldShowOnboarding()

    return (
        <View style={{ flex: 1 }}>
            <ActivityIndicator animating={true} size="large" />
        </View>
    )
}

export default withNavigation(LaunchOnboardingScreen)

Final AppNavigation.js:

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

import styles from './Styles/NavigationStyles'

import MainTabNavigation from "./MainTabNavigation";
import DrinkCheckinNavigation from "./DrinkCheckinNavigation";
import OnboardingScreen from "../Containers/OnboardingScreen";
import LaunchOnboardingScreen from "../Containers/LaunchOnboardingScreen";

// Manifest of possible screens
export default createStackNavigator({
  MainScreen: {
    screen: MainTabNavigation,
    navigationOptions: {
      header: null
    }
  },
  DrinkDetailScreen: {
    screen: DrinkCheckinNavigation,
    navigationOptions: {
      title: 'Drink selecionado'
    }
  },
  OnboardingScreen: {
    screen: OnboardingScreen,
    navigationOptions: {
      header: null
    }
  },
  LaunchOnboardingScreen: {
    screen: LaunchOnboardingScreen,
    navigationOptions: {
      header: null
    }
  }
}, {
  initialRouteName: 'LaunchOnboardingScreen',
  navigationOptions: {
    headerStyle: styles.header
  },
})

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

Спасибо!