我如何用上下文包装反应导航答案

【问题标题】：how can i wrap react navigation with context我如何用上下文包装反应导航
【发布时间】：2021-09-19 13:07:13
【问题描述】：

我是 react-native 的新手，我尝试用上下文包装反应导航我看到一些代码用 createAppContainer 包装，但它是 react-navigation v4。我尝试使用一些新代码，但出现错误，我该如何解决。

我得到的错误是：

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（用于复合组件），但得到：不明确的。您可能忘记从文件中导出组件它是在其中定义的，或者您可能混淆了默认导入和命名导入

这是我的实现：

上下文.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>
  )
}

谢谢。

【问题讨论】：

能否也包括您遇到的错误？
我的错误是：错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。

标签： react-native react-navigation react-context

【解决方案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>
    )
  }
}

这是一个 snack 进行了这些更改。

【讨论】：