React Native：不变违规：此导航器缺少导航道具

Question

我的代码如下：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {LoginNavigator} from './src/components/login/LoginNavigator'
import {MainNavigator} from './src/components/main/MainNavigator'
import FBSDK from 'react-native-fbsdk'
import {createSwitchNavigator} from 'react-navigation'

const { AccessToken } = FBSDK

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      accessToken: null
    }
  }

  componentDidMount() {
    AccessToken.getCurrentAccessToken()
    .then((data) => {
      this.setState({
        accessToken: data.accessToken
      })
    })
    .catch(error => {
      console.log(error)
    })
  }

  render() {
    const Navigator = makeRootNavigator(this.state.accessToken)
    return <Navigator />
  }
}

const makeRootNavigator = (isLoggedIn) => {
  return createSwitchNavigator(
    {
      LoginNavigator: {
        screen: LoginNavigator
      },
      MainNavigator: {
        screen: MainNavigator
      }
    },
    {
      initialRouteName: isLoggedIn ? "MainNavigator" : "LoginNavigator"
    }
  )
}

我收到了上面的错误。由于我的导航器依赖于在构造器中创建的变量，因此我需要通过 render() 来完成。关注 react-native documentation on application containers 没有帮助。

Answer 1

在 react-navigation v3 中，您必须使用 createAppContainer 包装 makeRootNavigator。将您的代码更改为：

render() {
   const Navigator = createAppContainer(makeRootNavigator(this.state.accessToken));
   return <Navigator />
}

并且不要忘记在文件

之上导入 createAppContainer

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

Answer 2

这是解决上述问题的有效方法

import { createStackNavigator } from 'react-navigation-stack'
import Login from './src/Login';
import Fruits from './src/Fruits';
import FruitZoom from './src/FruitZoom';
import {createAppContainer } from 'react-navigation';
import React from 'react';

const AppNavigator = createStackNavigator({
  Login: { screen:Login},
  Fruits: { screen: Fruits},
  FruitZoom: { screen: FruitZoom}
}, {
  initialRouteName: 'Login',
  headerMode: 'none'
});

const Apps = createAppContainer(AppNavigator);
export default class App extends React.Component {
  render() {
      return <Apps />;
  }
}

React Native：不变违规：此导航器缺少导航道具

React Native: Invariant Violation: The navigation prop is missing for this navigator

react-native

react-native-android

react-native-navigation