如何使用 React Native 中的 react-navigation 在具有返回功能的屏幕上添加 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 挂钩来实现此目的

在您要放置此 header 的屏幕上，即 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 道具。

这是一个Live Snack Example