React Native:不变违规:此导航器缺少导航道具 [英] React Native: Invariant Violation: The navigation prop is missing for this navigator
本文介绍了React Native:不变违规:此导航器缺少导航道具的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的代码如下:
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 文档 没有帮助.
and I'm getting the error above. Since my Navigators depend on the variables created in construtor, I needed to do it via render(). Following react-native documentation on application containers didn't help.
推荐答案
在 react-navigation v3 中,你必须用 createAppContainer 包裹 makeRootNavigator.将您的代码更改为:
In react-navigation v3, you must wrap makeRootNavigator with createAppContainer. Change your code to :
render() {
const Navigator = createAppContainer(makeRootNavigator(this.state.accessToken));
return <Navigator />
}
并且不要忘记在文件顶部导入 createAppContainer
and don't forget to import createAppContainer
on top of the file
import {createSwitchNavigator, createAppContainer} from 'react-navigation'
这篇关于React Native:不变违规:此导航器缺少导航道具的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文