React Navigation header 按钮及导航嵌套

在header增加按钮

与header交互的最常见方式是点击title左边或右边的按钮。让我们在header右侧添加一个按钮(这是整个屏幕上最难触碰的地方之一，取决于手指和手机的大小，但也是放置按钮的正常位置)

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
}

当我们以这种方式定义按钮时，options中的this变量不是homesscreen实例，所以你不能在它上面调用setState或任何实例方法。这是非常重要的，因为它是非常常见的，希望按钮在你的头部与屏幕交互的头部所属。下面我们来看看如何做这个。

头部与其屏幕组件的交互

为了能够与屏幕组件交互，我们需要使用navigation.setOptions定义按钮而不是options属性。通过在screen组件中使用navigation.setOptions，我们可以访问screen的props、state、context等。

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={({ navigation, route }) => ({
          headerTitle: props => <LogoTitle {...props} />,
        })}
      />
    </Stack.Navigator>
  );
}

function HomeScreen({ navigation }) {
  const [count, setCount] = React.useState(0);

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => setCount(c => c + 1)} title="Update count" />
      ),
    });
  }, [navigation]);

  return <Text>Count: {count}</Text>;
}

导航嵌套

嵌套导航器意味着在一个导航器的屏幕中嵌套另一个导航器。
下面的例子中，Home组件包含一个选项卡导航器。Home组件也用于App组件内部堆栈导航器的Home屏幕。这里，标签导航器嵌套在堆栈导航器中:

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

嵌套导航器特性

• 每个导航器保存自己的导航历史
  • 例如，当你在嵌套堆栈导航器的屏幕内按下后退按钮时，即使有另一个导航器作为父导航器，它也会回到嵌套堆栈内的上一个屏幕
• 每个导航器都有自己的选项
  • 例如，在嵌套在子导航器中的屏幕中指定标题选项不会影响在父导航器中显示的标题
• 导航器中的每个屏幕都有自己的参数
  • 例如，任何传递到嵌套导航器中的屏幕的参数都在该屏幕的路由道具中，不能从父或子导航器中的屏幕访问
• 导航操作由当前导航器处理，如果不能处理，则弹出
• 导航器特定的方法可以在嵌套的导航器中使用
• 嵌套导航器不接收父级事件
• 父导航器的UI呈现在子导航器之上

在嵌套导航器中导航到屏幕

function Root() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={Home} />
      <Drawer.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Drawer.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Root"
          component={Root}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Feed" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在这里，你可能想从Feed组件导航到Root屏幕
navigation.navigate('Root');
它可以工作，并显示Root组件内部的初始屏幕，即Home。但有时您可能想要控制应该在导航中显示的屏幕。要实现它，你可以在参数中传递屏幕的名称:
navigation.navigate('Root', { screen: 'Profile' });

在嵌套导航器中向屏幕传递参数

navigation.navigate('Root', {
  screen: 'Profile',
  params: { user: 'jane' },
});

navigation.navigate('Root', {
  screen: 'Settings',
  params: {
    screen: 'Sound',
    params: {
      screen: 'Media',
    },
  },
});

呈现导航器中定义的初始路由

默认情况下，当您在嵌套导航器中导航一个屏幕时，指定的屏幕将被用作初始屏幕，导航器上的初始路由道具将被忽略。这个行为不同于React Navigation 4。
如果你需要呈现导航器中指定的初始路由，你可以通过设置initial: false来禁用使用指定屏幕作为初始屏幕的行为:

navigation.navigate('Root', {
  screen: 'Settings',
  initial: false,
});

嵌套多个导航器

当嵌套多个堆栈、抽屉或底部选项卡导航器时，将同时显示子导航器和父导航器的标题。然而，通常更可取的做法是在子导航器中显示标题，并在父导航器的屏幕中隐藏标题。

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="EditPost" component={EditPost} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

如果你不希望标题出现在任何导航器中，你可以在所有导航器中指定headerShown: false:

function Home() {
  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="EditPost" component={EditPost} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}