我如何包装反应导航与上下文

我是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>
  )
}

谢谢。

# # #自Provider is a named 来自Context.js it should be imported l它应该像这样导入:

import {Provider} from ` 。/src/contexts/Context 。 conf 。 conf 。 conf 。 conf 。 conf 。 conf 。 conf 。 conf 。 conf 。 conf 。 conf

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

在此之后，我建议更改App。js，这样你就不会创建一个单独的默认导出，只是通过更改应用程序，将应用程序包装在提供商中:

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>
    )
  }
}

这是带零钱的点心。