指定自定义headerLeft时，在标题中渲染默认后退按钮（react-navigation）

Question

在react本机项目中使用react-navigation，是否可以在指定自定义headerLeft时在堆栈导航器中呈现默认的后退按钮？或者这只能通过显式返回自定义headerLeft来实现，该自定义headerLeft还包含在按下时执行navigation.goBack的按钮？我当前的代码如下所示，但我也希望在适用的时候显示后退按钮（当goBack是一个选项时）。

export default StackNavigator(
  {
        ...,
  },
  {
    headerMode: "float",
    navigationOptions: ({ navigation }) => ({
      headerLeft: (
        <MaterialCommunityIcons name={"menu"} style={{ color: "white" }} size={25} onPress={() => navigation.navigate("DrawerOpen")} />
      ),
      headerStyle: { backgroundColor: "#4C3E54", paddingLeft: 10, paddingRight: 10 },
      headerTitleStyle: { color: "white" }
    })
  }
)

参考图像显示后退按钮，然后是我应用自定义headerLeft后的标题。

Answer 1

您可以为每个屏幕设置navigationOption，也可以为整个navigationOption设置默认StackNavigation。在下面的示例中，除Main屏幕外，每个屏幕都将禁用手势。

示例

const ModalNavigator = StackNavigator(
 {
   Main: {
     screen: Main,
     navigationOptions: {
       gesturesEnabled: true,
     }
   },
   Login: { screen: Login },
   Profile: { screen: Profile },
 },
 {
   headerMode: 'none',
   mode: 'modal',
   navigationOptions: {
     gesturesEnabled: false,
   }
 }
);

Answer 2

在您的React组件上，您可以覆盖导航选项，只需选择基于导航参数渲染自定义左键，在这种情况下，如果 params.editing 为false，则会显示默认后退按钮，否则呈现 Something 按钮：

static navigationOptions = ({ navigation }: NavigationType) => {
  const params = navigation.state.params || {}

  var header = {
    title: "Home"
  }

  if (params.editing) {
    header = {
      ...header,
      headerLeft: (
          <Button onPress={params.doSomething} title="Something"/>
      )
    }
  }

  return header
}