我正在使用反应导航 . 我想在屏幕的 Headers 上显示抽屉 . 当我打开抽屉时,我的 Headers 目前没有隐藏在抽屉下面 .
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',
}
})
那么如何显示抽屉导航抽屉重叠或覆盖的 Headers .
目前看起来像这样
2 回答
您应该为
CategoryScreen
和ProductScreen
创建一个新的StackNavigator您在
CategoryScreen
和ProductScreen
导航选项上设置 Headers这就是我的意思
结果就是这样
Following will make a floating header which similar with your screenshot
将 Headers 模式设置为
float
(您不需要将CategoryScreen
和ProductScreen
包装成StackNavigator
)如果您将 Headers 模式更改为float
,则会出现此结果
在我的情况下,我制作自己的Header组件并在我想要的每个页面中使用它 . 它使我能够为每个页面自定义 Headers .
绝对是后门的方式,我希望其他人有你的问题的确切答案 .
这是一个例子......
主页:
Headers 组件: