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

Question

我正在使用反应导航。我想在屏幕标题上显示抽屉。目前，当我打开抽屉时，我的标题没有隐藏在抽屉下方。

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

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

目前是这个样子

Answer 1

希望这对您有所帮助...

           export function DrawerContent(props) {

               return(

                <View style={{flex:1}}>
               <DrawerContentScrollView {...props}>
               <View style={styles.drawerContent}>
               <View style={styles.userInfoSection}>
               <View style={{flexDirection:'row',marginTop: 15}}>
               <Avatar.Image size={50} />
               <View style={{marginLeft:15, flexDirection:'column'}}>
               <Title style={styles.title}>{status}</Title>
               <Caption style={styles.caption}>@_something</Caption>

                        </View>
                    </View>
                </View>
            </View>

        </DrawerContentScrollView>
      
    </View>
);
  }
         const styles = StyleSheet.create({
            userInfoSection: {
             paddingLeft: 20,
                         },
                          title: {
                fontSize: 16,
                marginTop: 3,
                  fontWeight: 'bold',
                   },
                   caption: {
                   fontSize: 14,
                   lineHeight: 14,
                     },

                 
                 });

在 Drawer 导航容器的 App.js 中，我将 DrawerContent 作为道具传递并在 app.js main 中导入 DrawerContent 组件，如图所示

  const Navigation (){
      return(
  <Drawer.Navigator initialRouteName="Home"  drawerContent={props =><DrawerContent {...props} />}>
  <Drawer.Screen name="Home" component={HomeScreen} options={{marginLeft:5}} />
  <Drawer.Screen name="Notifications" component={NotificationsScreen} />
  </Drawer.Navigator>
  )
  }
     export default const App = ()=> {
                    return (
                           <NavigationContainer>
                              <Navigation />
                            </NavigationContainer>
               );
                   };

Answer 2

就我而言，我制作了自己的 Header 组件并在我想要的每个页面中使用它。它使我能够自定义每个页面的标题。

绝对是后门方式，希望其他人能准确回答你的问题。

这是一个例子……

主页：

export default class Home extends Component {
    render() {  
        return (
            <View style={{ flex: 1 }}>

                <Header showBorder={true}/>

                <ScrollView>
                   ...
                </ScrollView>
            </View>
        );
    }
}

标题组件：

export default class Header extends React.PureComponent {

  renderTitle = () => {
    if (this.props.title) {
      return (
        <View style={{ flexDirection: 'column', flex: 3, justifyContent: 'center' }}>
          <View style={{ alignSelf: 'flex-start' }}>
            <Text style={[styles.fontBold, { fontSize:17, color: colors.borderWidthColor }]}>{this.props.title}</Text>
          </View>
        </View>
      )
    }
  }

  renderBack = () => {
    if (this.props.back) {
      return (
        <View style={{ marginTop:3 }}>
          <TouchableOpacity
            onPress={() => {
              this.props.navigation.goBack()
            }}
            style={{ alignSelf: 'flex-start' }}>
            <Icon name="md-arrow-back" size={23} color="black" />
          </TouchableOpacity>
        </View>
      )
    }
  }


  render() {
    return (
      <View style={[{ height: 70, backgroundColor: this.props.backgroundColor, width: win.width, borderBottomWidth: this.props.showBorder ? 1 : 0 }]}>
        <View style={{ flex: 1, flexDirection: 'row', marginTop: Platform.OS == 'ios' ? 17 : 3 }}>
          <View style={{ flexDirection: 'column', flex: 1, justifyContent: 'center', marginLeft: 12 }}>
            {this.renderBack()}
            {this.renderTitle()}
          </View>
        </View>
      </View>
    )
  }
}

Answer 3

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

如果您将标题模式更改为浮动，这是结果