Question

感谢阅读！

我试图向我的应用程序添加一个Onboarding流，但是每当我将AppOnboardingNavigation添加为ReduxNavigation Root组件时，我的应用程序都会崩溃：

我真的不明白为什么会这样，有什么想法吗？谢谢！

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)

最终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
  },
})

我认为通过这种方式，如果弹出一些新屏幕（例如维护屏幕等），我可以更轻松地扩展应用程序。

谢谢！

启用导航时反应导航效果不佳

1 个答案: