React导航--嵌套的堆栈导航器提供重复的头文件。

Question

我有3页的格式。

• 第1页
  • 第2页
    • 第3页

如果我在所有页面上都显示页眉。

• 第1页
  • 没有后退按钮（正常）。
• 第2页
  • "返回第1页"
  • 显示第二个标题，没有后退按钮。
• 第3页
  • "返回第1页"
  • 显示第二个标题 "返回第2页"
  • 显示第三个头，没有后退按钮。

我已经隐藏了第2页和第3页的页眉，但这意味着页眉上只显示 "返回第1页"，从来没有为下面的页面更新过。

所以很明显我的嵌套不知怎么弄坏了，只是我想不明白是怎么弄坏的。

代码是这样的。

const HeaderOptions = ({navigation}) => {
  return {
    headerTitle: props => (
      <Text style={{color: '#fff', fontWeight: 'bold'}}>My Site</Text>
    ),
    headerStyle: {
      backgroundColor: '#0D47A1',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    }
  };
};

const Page1Stack = createStackNavigator();

function Page1StackScreen() {
  return (
    <Page1Stack.Navigator initialRouteName="Page1">
      <Page1Stack.Screen
        name="Page1"
        component={Page1Screen}
        options={HeaderOptions}
      />
      <Page1Stack.Screen
        name="Page2"
        component={Page2StackScreen}
        options={HeaderOptions}
      />
    </Page1Stack.Navigator>
  );
}

const Page2Stack = createStackNavigator();

function Page2StackScreen() {
  return (
    <Page2Stack.Navigator>
      <Page2Stack.Screen
        name="Page2"
        component={Page2Screen}
        options={{headerShown: false}}
      />
      <Page2Stack.Screen
        name="Page3"
        component={Page3StackScreen}
        options={{headerShown: false}}
      />
    </Page2Stack.Navigator>
  );
}

const Page3Stack = createStackNavigator();

function Page3StackScreen() {
  return (
    <Page3Stack.Navigator>
      <Page3Stack.Screen
        name="Page3"
        component={Page3Screen}
        options={{headerShown: false}}
      />
    </Page3Stack.Navigator>
  );
}

Answer 1

你确定你需要堆栈内的堆栈吗？也许你只需要一个堆栈。

const HeaderOptions = ({navigation}) => {
  return {
    headerTitle: props => (
      <Text style={{color: '#fff', fontWeight: 'bold'}}>My Site</Text>
    ),
    headerStyle: {
      backgroundColor: '#0D47A1',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    }
  };
};

const Stack = createStackNavigator();

function StackScreen() {
  return (
    <Stack.Navigator initialRouteName="Page1">
      <Stack.Screen
        name="Page1"
        component={Page1Screen}
        options={HeaderOptions}
      />
      <Stack.Screen
        name="Page3"
        component={Page3Screen}
      />
      <Stack.Screen
        name="Page2"
        component={Page2Screen}
      />
    </Stack.Navigator>
  );
}