如何在 React Native 中使用 react-navigation 在具有 goBack 功能的屏幕上添加 customHeaderLeft 按钮？

Question

<NavigationContainer>
  <Stack.Navigator screenOptions={{}}>
    <Stack.Screen name="home" component={Home} />
    <Stack.Screen
      name="MyProfile"
      component={Profile}
      options={{
        headerTintColor: 'white',
        title: 'My Profile',
        headerTransparent: true,
        headerShadowVisible: false,
        headerRight: () => (
          <TouchableOpacity>
            <DrawerIcon size={30} color={'white'} name="md-reorder-two-sharp" />
          </TouchableOpacity>
        ),
        headerLeft: () => (
          <TouchableOpacity>
            <Ionicons
              name="arrow-back-sharp"
              size={22}
              color="white"
              style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }}
            />
          </TouchableOpacity>
        ),
      }}
    />
  </Stack.Navigator>
  <ModalPortal />
</NavigationContainer>

下面是我用于堆栈导航的代码，我想从那个屏幕返回

1.headerLeft: () => <TouchableOpacity>
  <Ionicons name="arrow-back-sharp" size={22} color="white" style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }} />
  </TouchableOpacity>
}} />

Answer 1

有两种方法可以实现这一目标

1.) 在屏幕上设置options

你可以使用useLayoutEffect钩子来实现这个

在您要放置此标题的屏幕上，即Profile 屏幕上，只需添加以下代码

React.useLayoutEffect(() => {
  navigation.setOptions({
    headerLeft: () => (
      <Ionicons
        name="arrow-back-sharp"
        size={22}
        color="white"
        style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }}
        onPress={() => navigation.goBack()}
        // make sure you destructure the navigation variable from the props
        // or otherwise you'll have to write it like this
        // onPress={() => props.navigation.goBack()}
      />
    ),
  });
}, [navigation]);

你的导航容器应该看起来像

<NavigationContainer>
  <Stack.Navigator screenOptions={{}}>
    <Stack.Screen name="home" component={Home} />
    <Stack.Screen
      name="MyProfile"
      component={Profile}
      options={{
        headerTintColor: 'white',
        title: 'My Profile',
        headerTransparent: true,
        headerShadowVisible: false,
      }}
    />
  </Stack.Navigator>
  <ModalPortal />
</NavigationContainer>;

看看Working Example这里

2.) 在 Navigation Container 中设置 headerLeft 和 headerRight 属性

在 NavigationContainer 中设置属性，像这样

<NavigationContainer>
  <Stack.Navigator screenOptions={{}}>
    <Stack.Screen name="home" component={Home} />
    <Stack.Screen
      name="MyProfile"
      component={Profile}
      options={({ navigation, route }) => ({
        headerTintColor: 'white',
        title: 'My Profile',
        headerTransparent: true,
        headerShadowVisible: false,
        headerRight: () => (
          <TouchableOpacity>
            <DrawerIcon size={30} color={'white'} name="md-reorder-two-sharp" />
          </TouchableOpacity>
        ),
        headerLeft: () => (
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <Ionicons
              name="arrow-back-sharp"
              size={22}
              color="white"
              style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }}
            />
          </TouchableOpacity>
        ),
      })}
    />
  </Stack.Navigator>
  <ModalPortal />
</NavigationContainer>

看看Working Example这里

Answer 2

您提供了一个TouchableOpacity 作为后退按钮，但您没有指定任何onPress 回调。您应该为您的TouchableOpacity 提供一个onPress 回调。

<NavigationContainer>
  <Stack.Navigator screenOptions={{}}>
    <Stack.Screen name='home' component={Home} />
    <Stack.Screen 
      name='MyProfile'
      component={Profile} 
      options={({ navigation, route }) => ({
        headerTintColor: 'white',
        title: 'My Profile',
        headerTransparent: true,
        headerShadowVisible: false,
        headerRight: () => (
          <TouchableOpacity>
            <DrawerIcon size={30} color={'white'} name='md-reorder-two-sharp' />
          </TouchableOpacity>
        ),
        headerLeft: () => (
          <TouchableOpacity onPress={()=> navigation.goBack()}>
            <Ionicons name="arrow-back-sharp" size={22} color="white" style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }} />
          </TouchableOpacity>
        )
      })} 
    />
  </Stack.Navigator>
  <ModalPortal />
</NavigationContainer>

如果你只是想改变后退按钮的外观，你最好使用react-navigation堆栈的headerBackImage props。

这是Live Snack Example