指定自定义 headerLeft 时在标题中呈现默认后退按钮（反应导航）答案

【问题标题】：Render default back button in header when specifying a custom headerLeft (react-navigation)指定自定义 headerLeft 时在标题中呈现默认后退按钮（反应导航）
【发布时间】：2018-03-25 20:09:48
【问题描述】：

在 react native 项目中使用 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 后显示标题。

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

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

示例

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

【讨论】：

【解决方案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
}

【讨论】：