react-native – 如何在反应导航中将抽屉放在标题上？

发布时间：2020-12-15 16:20:16 所属栏目：百科来源：网络整理

导读：我正在使用反应导航.我想在屏幕的标题上显示抽屉.当我打开抽屉时,我的标题不会隐藏在抽屉下面. import React from 'react';import { View,Text,StyleSheet } from 'react-native';import { createStackNavigator,createDrawerNavigator } from 'react-naviga

我正在使用反应导航.我想在屏幕的标题上显示抽屉.当我打开抽屉时,我的标题不会隐藏在抽屉下面.

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',}
})

那么如何显示抽屉导航抽屉重叠或覆盖的标题.

目前看起来像这样

enter image description here

解决方法

>您应该为CategoryScreen和ProductScreen创建一个新的StackNavigator
>您在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',});

这是结果

Embedded StackNavigator

以下将创建一个与您的屏幕截图类似的浮动标题

将标题模式设置为float(您不需要将CategoryScreen和ProductScreen包装到StackNavigator中)

export default AppStack = createStackNavigator({
  drawer: {
    screen: drawerScreens,{
  headerMode: 'float',// set this header mode to float so you can share the header
  initialRouteName: 'drawer',});

如果将标题模式更改为float,则会出现此结果

Float header

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!