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

2022-01-30 14:45:29 标签 react-nativereact-navigationreact-context

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

这是带零钱的点心。

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码