抽屉导航中的返回 header 按钮

Question

我怎样才能在某些屏幕上设置后退按钮，例如 ProfileScreen/ReporterScreen 这样一来，用户点击它就会转到 ContentFlow。

const ProfileNavigator = createStackNavigator({ ProfileScreen });
const ReporterNavigator = createStackNavigator({ ReporterScreen });

const ContentNavigator = createMaterialBottomTabNavigator({ ContentScreen });

const HomeNavigator = createDrawerNavigator({
 ContentFlow:ContentNavigator,
 ProfileFlow:ProfileNavigator,
 ReporterFlow:ReporterNavigator
});

我在 ContentScreen 中为抽屉添加了 header 按钮，但对于其他屏幕，我希望有后退按钮，当按下后退按钮时如何导航到 ContentFlow。

Answer 1

您可以将 headerLeft 设置为 navigationOptions 中的组件。因此，例如，如果你想在 ReporterNavigator 中有一个或多个屏幕，这些屏幕有一个 header 按钮，允许用户导航到 ContentFlow 你可以这样做：

const ReporterNavigator = createStackNavigator({
  Screen: {
    screen: ScreenComponent,
    navigationOptions: ({ navigation }) => {
      return {
        headerLeft: () => (
          <Button
            title="go to contentflow"
            onPress={() => {
              navigation.navigate('ContentFlow');
            }}
          />
        ),
      };
    },
  },
});

如果您想要 ReporterNavigator 的所有屏幕都有按钮，您需要使用 defaultNavigationOptions 而不是 navigationOptions。请记住，navigationOptions 是在 RouteConfigs 中设置的，而 defaultNavigationOptions 是在 NavigatorConfigs (https://reactnavigation.org/docs/4.x/stack-navigator/#stacknavigatorconfig) 中定义的。

---

当你这样做时：

const HomeNavigator = createDrawerNavigator({
  ContentFlow: ContentNavigator,
  ProfileFlow: ProfileNavigator,
  ReporterFlow: ReporterNavigator,
});

导航 object 也得到了传承。因为它是从抽屉导航器向下传递的，所以它保存着该导航器的导航状态。因此，您可以导航到抽屉导航器内的屏幕。

如果您想访问 ReporterNavigator 的导航状态，您可以改为访问匿名函数中的道具 headerLeft 设置为：

// ...
headerLeft: ({navigation}) => (
  // etc...
)
// ...