下面是我的使用抽屉式导航的代码。但是在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>
);
}
}
请帮助,因为我被困住了并且已经看过类似的问题,但是没有运气
答案 0 :(得分:1)
我发现为不同屏幕使用和自定义标题的最佳方法是使用 react-native-elements 的 Header 组件。您只需将组件添加到要在其上显示标题的每个屏幕。另外,不要忘记在stackNavigator上执行 header:null ,这样它就不会在屏幕上显示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>
答案 1 :(得分:1)
使用通用标头组件,并在需要标头的每个屏幕中实施它。从屏幕传递标题名称作为道具
标题组件:
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>