首页 文章

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

提问于
浏览 次
0

在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后的 Headers .

enter image description here

react-native react-navigation

2 回答

  • 0

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

    Example

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

    在您的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
}
    回复于

相关问题