我正在使用反应导航。我想在屏幕的标题上方显示抽屉。当前,当我打开抽屉时,标题没有隐藏在抽屉下方。
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
import CategoryScreen from './CategoryScreen';
import ProductsScreen from './ProductsScreen';
import CartScreen from './CartScreen';
const drawerScreens = createDrawerNavigator ({
Category: CategoryScreen,
Products: ProductsScreen,
},{
initialRouteName: 'Category'
}
)
export default AppStack = createStackNavigator(
{
drawer: {
screen: drawerScreens,
navigationOptions: ({ navigation }) => ({
header: <View style={styles.container}><Text>Header</Text></View>
}),
},
cart: {screen: CartScreen}
},
{
initialRouteName: 'drawer',
}
);
const styles = StyleSheet.create({
container: {
height: 100,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'orange',
}
})
因此,如何显示与抽屉导航重叠或覆盖的标题。
目前看起来像这样
CategoryScreen
和创建一个新的StackNavigatorProductScreen
CategoryScreen
和ProductScreen
导航选项这就是我的意思
// wrap your screen inside the drawer into StackNavigator
const CategoryNavigator = createStackNavigator({
CategoryList: {
screen: CategoryScreen,
navigationOptions: {
title: "Category",
header: // any custom header here
}
},
});
const drawerScreens = createDrawerNavigator({
Category: CategoryNavigator,
Products: ProductNavigator,
}, {
initialRouteName: 'Category'
})
export default AppStack = createStackNavigator({
drawer: {
screen: drawerScreens,
},
cart: {
screen: CartScreen
}
}, {
initialRouteName: 'drawer',
});
这是结果
以下将创建一个浮动标题,该标题与您的屏幕截图相似
设置页眉模式float
(你不需要包装CategoryScreen
和ProductScreen
成StackNavigator
)
export default AppStack = createStackNavigator({
drawer: {
screen: drawerScreens,
},
cart: {
screen: CartScreen
}
}, {
headerMode: 'float', // set this header mode to float so you can share the header
initialRouteName: 'drawer',
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句