如何用上下文包装react导航

Question

我是react-native的新成员，我尝试用上下文包装react导航，我看到一些代码用createAppContainer包装，但它是react-navigation v4。我尝试使用一些新的代码，但我得到了错误，我怎么能解决它。

得到的错误是:

错误:元素类型无效:期望是字符串(用于内置)组件)或类/函数(用于复合组件)，但得到:未定义的。您可能忘记了从文件中导出组件它定义在，或者您可能混淆了默认导入和命名导入

这是我的实现:

Context.js

import React from 'react'
const Context = React.createContext();
export const Provider = ({children})=>{
return(
<Context.Provider>
{children}
</Context.Provider>
)
}

App.js

import React, { Component } from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { IndexScreen } from './src/screens';
import Provider from './src/contexts/Context';
const Stack = createStackNavigator();
class App extends Component {
render(){ 
return(
<NavigationContainer>
<Stack.Navigator initialRouteName = "Index">
<Stack.Screen name = "Index" component = {IndexScreen}/>
</Stack.Navigator>
</NavigationContainer>
)
}
}
export default  () => {
return ( 
<Provider>
<App />
</Provider>
)
}

谢谢。

Answer 1

由于Provider是Context.js的命名导出，因此应该像这样导入:

import {Provider} from './src/contexts/Context

像现在这样导入它，假设它是Context.js的默认导出，但它不是。

在此之后，我建议更改App.js，这样您就不会创建单独的默认导出，只是通过将App更改为以下内容来将App包装在Provider中:

export default class App extends Component {
render() {
return (
<Provider>
<NavigationContainer>
<Stack.Navigator initialRouteName="Index">
<Stack.Screen name="Index" component={() => (
<View>
<Text>Hello world</Text>
</View>
)} />
</Stack.Navigator>
</NavigationContainer>
</Provider>
)
}
}

这是一个有这些变化的小吃。