Question

我正在做出本机抽屉式导航，需要一个通用的标题，而不是所有导航器上方的默认标题。我正在尝试将导航器添加到app.js文件的主容器中。

我已经完成了这个过程，但是我需要在导航器之前创建一个标题。 How to get drawer over the header in react navigation?

我尝试在homeScreen和AnotherScreen上的按钮上使用代码，并且效果很好。但是我想要一个通用的自定义标题，每个屏幕顶部都有组件。

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import {
  createAppContainer,
  createStackNavigator,
  createDrawerNavigator
} from "react-navigation";
import HomeScreen from "./Screens/HomeScreen";
import AnotherScreen from "./Screens/AnotherScreen";
import { TouchableOpacity } from "react-native-gesture-handler";

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={[styles.container]}>
        <View style={[{ height: 60, backgroundColor: "hotpink" }]}>
          <TouchableOpacity
            onPress={this.props.navigation.openDrawer()} //<-- Problem lies here
            style={[
              {
                backgroundColor: "white",
                height: "100%",
                width: 60,
                justifyContent: "center",
                alignItems: "center"
              }
            ]}
          >
            <Text>OK</Text>
          </TouchableOpacity>
        </View>
        <View style={[{ flex: 1 }]}>
          <DrawerNavigation />
        </View>
      </View>
    );
  }
}

const MainDrawerNavigation = createDrawerNavigator(
  {
    HomeScreen: {
      screen: HomeScreen
    },
    AnotherScreen: {
      screen: AnotherScreen
    }
  },
  { drawerWidth: 300, headerMode: "none" }
);
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "red"
  }
});

const DrawerNavigation = createAppContainer(MainDrawerNavigation);

我希望打开抽屉，但它向我显示以下错误。 enter image description here

在其他页面上编写代码时，PS：Drawer可以正常工作。

如何在react-native中将带有抽屉式导航的通用标头放到本地？

0 个答案: