Javascript 使用抽屉导航时，反应导航标题不可见

下面是我使用抽屉导航的代码。但主屏幕上给出的标题消失且不可见。 我只使用抽屉导航，没有进行导航嵌套

App.js文件-

 import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import MyApp from "./src/router/router";

export default class App extends Component {
  render() {
    return <MyApp />;
  }
}

HomeScreen.js文件-

import {
  createDrawerNavigator,
  createAppContainer
} from "react-navigation";
import Sidebar from "../components/Sidebar/Sidebar";
import HomeScreen from "../components/HomeScreen/HomeScreen";

const MyDrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: HomeScreen
    }
  },
  {
    contentComponent: Sidebar,
    drawerWidth: 200,

  }
);

const App = createAppContainer(MyDrawerNavigator);

export default App;

import React, { Component } from "react";
import {
  Text,
  View,
  ScrollView,
  TextInput,
  TouchableOpacity,
  Image
} from "react-native";
import { Calendar } from "react-native-calendars";
import ham from "../../assets/images/ham.png";

export default class HomeScreen extends Component {
  static navigationOptions = {
    drawerLabel: "Maruti Hotel Management",
    headerStyle: {
      backgroundColor: "#ED5A6C"
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      fontWeight: "bold",
      flex: 1,
      textAlign: "center"
    }
  };

  state = {
    markedDate: {}
  };

  dateSelectHandler = date => {
    let selectedDate = date.dateString;
    this.setState({
      markedDate: {
        [selectedDate]: {
          selected: true,
          marked: true,
          selectedColor: "#ED5A6C"
        }
      }
    });
  };

  render() {
    return (
      <ScrollView style={{ flex: 1 }}>
        <Calendar
          style={{ flex: 1 }}
          // Initially visible month. Default = Date()
          onDayPress={day => {
            console.log(day);
            this.dateSelectHandler(day);
          }}
          markedDates={this.state.markedDate}
          theme={{
            "stylesheet.calendar.header": {
              week: {
                marginTop: 5,
                flexDirection: "row",
                justifyContent: "space-around",
                backgroundColor: "#ED5A6C",
                color: "red"
              },
              dayHeader: {
                marginTop: 2,
                marginBottom: 7,
                width: 32,
                textAlign: "center",

                color: "#fff"
              }
            },
            calendarBackground: "#F5A5AE",

            arrowColor: "#ED5A6C",
            monthTextColor: "#ED5A6C",
            dayTextColor: "#ED5A6C",
            todayTextColor: "blue"
          }}
        />
        <View
          style={{
            flex: 1,
            backgroundColor: "#F07886",
            alignItems: "center",
            paddingTop: "2%",
            paddingBottom: "10%"
          }}
        >
          <Text
            style={{
              textAlign: "center",
              color: "#FFF",
              fontWeight: "500",
              fontSize: 17
            }}
          >
            Total Income (गल्ला)
          </Text>
          <TextInput
            style={{
              borderBottomColor: "#fff",
              borderBottomWidth: 1,
              paddingRight: "3%",
              paddingLeft: "3%",
              marginBottom: "2%",
              width: "80%"
            }}
            editable={true}
            maxLength={40}
            placeholder="Rs"
          />

          <TouchableOpacity style={{ width: "80%", marginTop: "2%" }}>
            <View
              style={{
                borderRadius: 5,
                backgroundColor: "#D85263",
                paddingTop: 10,
                paddingBottom: 10,
                // paddingLeft: 15,
                // paddingRight: 15,
                justifyContent: "center",
                alignItems: "center"
              }}
            >
              <Text
                style={{
                  width: "80%",
                  textAlign: "center",
                  color: "#fff",
                  fontWeight: "700",
                  fontSize: 16,
                  letterSpacing: 2
                }}
              >
                Submit
              </Text>
            </View>
          </TouchableOpacity>
        </View>
      </ScrollView>
    );
  }
}

import React，{Component}来自“React”；
进口{
文本，
看法
滚动视图，
文本输入，
可触摸不透明度，
形象
}从“反应本族语”；
从“react native calendars”导入{Calendar}；
从“../../assets/images/ham.png”导入ham；
导出默认类主屏幕扩展组件{
静态导航选项={
抽屉标签：“马鲁蒂酒店管理”，
头型：{
背景颜色：“ED5A6C”
},
标题颜色：“fff”，
头饰样式：{
fontWeight：“粗体”，
弹性：1，
textAlign：“居中”
}
};
状态={
标记日期：{}
};
dateSelectHandler=date=>{
让selectedDate=date.dateString；
这是我的国家({
标记日期：{
[选定日期]：{
选择：正确，
马克：是的，
所选颜色：#ED5A6C
}
}
});
};
render（）{
返回(
{
控制台日志（天）；
此.dateSelectHandler（天）；
}}
markedDate={this.state.markedDate}
主题={{
“样式表.日历.标题”：{
周：{
玛金托普：5，
flexDirection:“行”，
为内容辩护：“周围的空间”，
背景色：“ED5A6C”，
颜色：“红色”
},
日标题：{
玛金托普：2，
marginBottom:7，
宽度：32，
textAlign：“居中”，
颜色：“fff”
}
},
日历背景：“F5A5AE”，
箭头颜色：“ED5A6C”，
monthTextColor:#ED5A6C“，
dayTextColor:#ED5A6C“，
todayTextColor:“蓝色”
}}
/>
总收入(गल्ला)
提交
);
}
}

---

请帮助我，因为我被卡住了，并且已经看到了类似的问题，但没有运气

我发现为不同的屏幕使用和自定义标题的最好方法是使用标题组件，通过react native elements。您只需将该组件添加到想要标题的每个屏幕上。另外，不要忘记这样做标题：在stackNavigator上为空，因此不会在屏幕上显示2个标题

示例如下：

<React.Fragment>
  <Header
    statusBarProps={{ barStyle: 'light-content' }}
    barStyle="light-content"
    leftComponent={
      <SimpleIcon
        name="menu"
        color="#34495e"
        size={20}
      />
    }
    centerComponent={{ text: 'HOME', style: { color: '#34495e' } }}
    containerStyle={{
      backgroundColor: 'white',
      justifyContent: 'space-around',
    }}
  />
</React.Fragment>

---

使用通用标题组件，并在需要标题的每个屏幕中实现它。从屏幕中将标题名称作为道具传递

标题组件：

class PageHeader extends Component {
        <Header>
          <Left>
            <Button
              transparent
              onPress={() => this.props.navigation.openDrawer()}
            >
              <Icon name="menu" />
            </Button>
          </Left>
          <Body>
            <Title>{this.props.title}</Title>
          </Body>
          <Right />
        </Header>
}
export default PageHeader;

类页眉扩展组件{
this.props.navigation.openDrawer（）}
>
{this.props.title}
}
导出默认页眉；

示例屏幕：

<Container style={styles.container}>
        <PageHeader title="Home" />

        <View>
          // screen view
        </View>
      </Container>

//屏幕视图