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

Question

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

我得到的错误是：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

这是我的实现：

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，这样您就不会创建单独的默认导出，只是通过更改 [=16] 将 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 进行了这些更改。

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

how can i wrap react navigation with context

react-native

react-navigation

react-context