我正在制作react原生博览会应用程序。我对react导航有一些问题。我有3个页面: main.js,->,page1.js,->,page2.js,我在这3个页面之间导航。但是当我导航到每一页时,它又多了一个标题。因此,当我导航到3个页面时,我有2个标题。一个标题来自page2.js,第二个来自page1.js
我想只有一个标题,这是从当前页面。我需要做什么才能拥有这个?我需要再添加一个页面,这些页面之间的导航位置是什么?我需要添加什么?请帮帮我代码:
// main.js createStackNavigator:
export default createStackNavigator(
{
Main: {
screen: Main,
navigationOptions: {
header: null,
},
},
Page1: {
screen: Page1,
navigationOptions: ({ navigation }) => ({
headerTitle: "Page1",
}),
},
},
{
initialRouteName: 'Main',
}
);
// Page1.js createStackNavigator:
export default createStackNavigator(
{
Page1: {
screen: Page1,
navigationOptions: {
header: null,
},
},
Page2: {
screen: Page2,
navigationOptions: ({ navigation }) => ({
headerTitle: "Text",
}),
},
},
{
initialRouteName: 'Page1',
}
);
// Page2:
export default createStackNavigator(
{
Page2: {
screen: Page2,
navigationOptions: {
header: null,
},
},
},
{
initialRouteName: 'Page2',
}
);
发布于 2019-07-16 03:11:29
在第二个堆栈导航器中,您可以在initialRouteName下添加属性headerMode:'none‘。这将隐藏标题。
发布于 2019-07-16 15:14:11
您使用的每个StackNavigator
都将呈现一个新的标题。在你的代码中,你嵌套了3个Stacks
。每次你导航到他们中的每一个,他们都会渲染他们的Header
。
您的parentNavigator
将拥有他的第一个头文件,它始终是全局的。当您导航到Page1时,这将呈现其标题,而不会隐藏其父标题。当你导航到Page2同样的东西时,留下3个来自3个stackNavigators的头。
如果你想让导航保持原样,你必须动态地隐藏每个堆栈上的标题。
使用你的第一个导航器:
{
Main: {
screen: Main,
navigationOptions: {
header: null,
},
},
Page1: {
screen: Page1,
navigationOptions: ({ navigation }) => ({
headerTitle: "Page1",
defaultNavigationOptions:{
header:null //this will hide the header if you are in Page1
}
}),
},
},
{
initialRouteName: 'Main',
}
);
这样做,您将隐藏Page1的标头,并且由于Page1是一个堆栈,因此您将只有Page1标头。我不知道您是如何考虑在这些屏幕之间导航的,因为这种解决方案会使从page1导航回到父Main
屏幕变得更加困难。
https://stackoverflow.com/questions/57045588
复制相似问题