我是新来的本地人。我试图在App.js中嵌套多个导航。我已经成功地嵌套在StackNavigator我BottomTabNavigation 0问题林通过设置它们的初始线路零部件到等于之前的导航链接,这些导航仪。我试图在其中添加DrawerNavigation,但一直收到错误。我所有的代码都在1个文件(App.js)中。我将如何处理?
堆栈导航器
const navigator = createStackNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
headerShown: false,
},
},
Favs: {
screen: CrossingScreen,
navigationOptions: {
title: 'News',
headerTitleStyle: {
color: 'white',
},
headerStyle: {
backgroundColor: 'red',
},
headerBackTitle: null,
headerTintColor: 'white',
},
},
},
{
initialRouteName: 'Home',
headerMode: 'screen',
})
底部标签导航器
const TabNavigator = createMaterialBottomTabNavigator(
{
Home: {
screen: navigator,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => (
<View>
<Icon
style={[{ color: tintColor }]}
size={25}
name={'train'}
/>
</View>
),
},
},
FavScreen: {
screen: FavScreen,
navigationOptions: {
tabBarLabel: 'Favorites',
tabBarIcon: ({ tintColor }) => (
<View>
<Icon
style={[{ color: tintColor }]}
size={28}
name={'star'}
/>
</View>
),
activeColor: '#f60c0d',
inactiveColor: '#f65a22',
barStyle: { backgroundColor: '#f69b31' },
},
},
MapScreen: {
screen: MapScreen,
navigationOptions: {
tabBarLabel: 'Map',
tabBarIcon: ({ tintColor }) => (
<View>
<Icon
style={[{ color: tintColor }]}
size={25}
name={'map'}
/>
</View>
),
activeColor: '#615af6',
inactiveColor: '#46f6d7',
barStyle: { backgroundColor: '#67baf6' },
},
},
Cart: {
screen: CartScreen,
navigationOptions: {
tabBarLabel: 'Feedback',
tabBarIcon: ({ tintColor }) => (
<View>
<Icon
style={[{ color: tintColor }]}
size={25}
name={'mail'}
/>
</View>
),
},
},
Cart2: {
screen: CartScreen,
navigationOptions: {
tabBarLabel: 'Add',
tabBarIcon: ({ tintColor }) => (
<View>
<Icon
style={[{ color: tintColor }]}
size={25}
name={'add'}
/>
</View>
),
},
},
},
{
initialRouteName: 'Home',
activeColor: '#f0edf6',
inactiveColor: '#226557',
barStyle: { backgroundColor: '#3BAD87' },
})
抽屉导航器
const DrawerNav = createDrawerNavigator(
{
Page1: {
screen: TabNavigator,
},
Page2: {
screen: FavScreen,
},
Page3: {
screen: MapScreen,
},
},
{
contentComponent: SideMenu,
drawerWidth: 300,
})
将其导出到App.js中的应用容器中
export default createAppContainer(DrawerNav)
**错误:**
我通过仔细阅读[ https://reactnavigation.org/docs/upgrading-from-4.x][1]解决了我的问题
导航API在v4.0和v5.0之间进行了重大更改
这就是您将StackNavigator和MaterialBottomTabNavigatior嵌套在Drawer Navigator中的方法
如果您使用常规的BottomTabNavigatior,则实现相同
const Tab = createMaterialBottomTabNavigator()
const Stack = createStackNavigator()
const Drawer = createDrawerNavigator()
export default class App extends Component {
//ALL NAVIGATION STACKS IN 1 CONTAINER
render() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={MyStack} />
</Drawer.Navigator>
</NavigationContainer>
)
}
}
const MyStack = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={BottomNav}
options={{
headerShown: false,
}}
/>
<Stack.Screen name="Crossing" component={CrossingScreen} />
</Stack.Navigator>
)
}
const BottomNav = () => {
return (
<Tab.Navigator initialRouteName="Home">
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarIcon: ({ tintColor }) => (
<View>
<Icon
style={[{ color: tintColor }]}
size={28}
name={'train'}
/>
</View>
),
}}
/>
<Tab.Screen
name="Favorites"
component={FavScreen}
options={{
tabBarIcon: ({ tintColor }) => (
<View>
<Icon
style={[{ color: tintColor }]}
size={28}
name={'star'}
/>
</View>
),
}}
/>
<Tab.Screen
name="Map"
component={MapScreen}
options={{
tabBarIcon: ({ tintColor }) => (
<View>
<Icon
style={[{ color: tintColor }]}
size={28}
name={'map'}
/>
</View>
),
}}
/>
<Tab.Screen
name="Feedback"
component={ContactScreen}
options={{
tabBarIcon: ({ tintColor }) => (
<View>
<Icon
style={[{ color: tintColor }]}
size={28}
name={'mail'}
/>
</View>
),
}}
/>
<Tab.Screen
name="Add"
component={AddScreen}
options={{
tabBarIcon: ({ tintColor }) => (
<View>
<Icon
style={[{ color: tintColor }]}
size={28}
name={'add'}
/>
</View>
),
}}
/>
</Tab.Navigator>
)
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句