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中为抽屉添加了标题按钮，但是对于其他屏幕，我想使用后退按钮，即当按下后退按钮时如何导航到ContentFlow。

Answer 1

您可以将headerLeft设置为navigationOptions中的组件。因此，例如，如果您想在ReporterNavigator中拥有一个或多个屏幕，并且这些屏幕的标题按钮允许用户导航至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,
});

导航对象也被向下传递。因为它是从抽屉式导航器传递下来的，所以它保持了该导航器的导航状态。这样您就可以导航到抽屉式导航器内的屏幕。

如果您想访问ReporterNavigator的导航状态，则可以访问将匿名功能headerLeft中的props设置为：

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

抽屉导航中的后标题按钮

1 个答案: