我想React Native
同时使用side menu
和设置一个应用tab menu
。
我正在关注本教程。
我的代码。
我得到错误:
undefined不是一个函数('...(0,_reactNavigation.TabNavigator)...'附近)
您可以在这里看到:
预览一些文件:
App.js
import React from 'react';
import { Drawer } from './src/navigators';
export default class App extends React.Component {
render() {
return (
<Drawer />
);
}
}
navigators.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
// Navigators
import { DrawerNavigator, StackNavigator, TabNavigator } from 'react-navigation'
// StackNavigator screens
import ItemList from './ItemList'
import Item from './Item'
// TabNavigator screens
import TabA from './TabA'
import TabB from './TabB'
import TabC from './TabC'
// Plain old component
import Plain from './Plain'
export const Stack = StackNavigator({
ItemList: { screen: ItemList },
Item: { screen: Item },
}, {
initialRouteName: 'ItemList',
})
export const Tabs = TabNavigator({
TabA: { screen: TabA },
TabB: { screen: TabB },
TabC: { screen: Stack },
}, {
order: ['TabA', 'TabB', 'TabC']
})
export const Drawer = DrawerNavigator({
Stack: { screen: Stack },
Tabs: { screen: Tabs },
Plain: { screen: Plain },
})
您从React Navigation导入的版本不正确(3.0.9)。那些已命名的导出文件在v1之后被重命名,这就是您正在使用的教程。
您正在导入:
import { DrawerNavigator, StackNavigator, TabNavigator } from 'react-navigation';
当您需要这样导入它们时:
import {
createDrawerNavigator,
createStackNavigator,
createBottomTabNavigator,
createAppContainer,
} from 'react-navigation';
您还需要将根导航器(在本例中为Drawer导航器)包装在中createAppContainer
。
像这样:
export const Drawer = createAppContainer(
createDrawerNavigator({
Stack: { screen: Stack },
Tabs: { screen: Tabs },
Plain: { screen: Plain },
})
);
如果您想快速修复,那么只需进入您package.json
的版本,然后将React Navigation的版本从 替换"react-navigation": "^3.0.9"
为 "react-navigation": "^1.5.2"
,然后Snack即可按预期运行https://snack.expo.io/@chris-bytelion/react-s
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句