下面是我使用抽屉导航的代码。但是在 HomeScreen 上给出的标题消失了并且不可见。 我只使用抽屉式导航,没有进行导航嵌套。
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 />;
}
}
router.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;
HomeScreen.js 文件 -
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>
);
}
}
请帮助我,因为我被困住了并且已经看过类似的问题但没有运气
最佳答案
使用通用标题组件并在需要标题的每个屏幕中实现它。从屏幕传递 header 名称作为 Prop
header 组件:
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;
示例屏幕:
<Container style={styles.container}>
<PageHeader title="Home" />
<View>
// screen view
</View>
</Container>
关于javascript - 使用抽屉导航时 react 导航标题不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54727232/