React Native react-navigation 6自定义header显示双端原生返回图标

你可以直接使用 React Navigation 6 官方提供的适配双端的返回图标组件，也可以手动通过平台判断渲染自定义图标：

方法1：使用官方内置适配组件（推荐） #

React Navigation 的@react-navigation/elements包内置了HeaderBackButton组件，会自动根据运行平台渲染 iOS/Android 对应的原生风格返回图标，无需手动做平台适配。

步骤1：导入依赖 #

import { HeaderBackButton } from '@react-navigation/elements';

步骤2：修改自定义Header组件 #

在你原来的leftItem占位位置添加如下代码：

const Header = ({ ...props }: any) => {
  const { options, navigation } = props

  return (
    <View style={styles.container}>
        <Image
            resizeMode='repeat'
            source={require('../../assets/img/pattern.png')}
            style={styles.image}
        />
        <View style={styles.wrapper}>
            {/* Back press icon */}
            <View style={styles.leftItem}>
                {/* 新增返回图标逻辑 */}
                {navigation.canGoBack() && (
                  <HeaderBackButton
                    onPress={() => navigation.goBack()}
                    tintColor="#000" // 自定义图标颜色
                    // 可选配置：iOS端是否显示返回文字，默认开启，安卓默认隐藏
                    // labelVisible={false}
                  />
                )}
            </View>
            {/* Stack title */}
            <View style={styles.textWrapper}>
                <Text style={[options.headerTitleStyle, styles.titleText]} numberOfLines={1}>
                    { options.title }
                </Text>
            </View>
            {/* Settings icon */}
            <View style={styles.rightItem}>
                { options.headerRight() }
            </View>
        </View>
    </View>
)}

方法2：自定义图标手动适配 #

如果你需要使用自己设计的返回图标，可以通过React Native的Platform模块判断平台，渲染对应的图标：

import { Platform, TouchableOpacity } from 'react-native';
// 导入你自己准备的双端图标
import IosBackIcon from '../../assets/svg/ios-back.svg';
import AndroidBackIcon from '../../assets/svg/android-back.svg';

// leftItem位置逻辑
<View style={styles.leftItem}>
  {navigation.canGoBack() && (
    <TouchableOpacity onPress={() => navigation.goBack()}>
      {Platform.OS === 'ios' ? <IosBackIcon /> : <AndroidBackIcon />}
    </TouchableOpacity>
  )}
</View>

注意事项 #

• 必须添加navigation.canGoBack()判断，避免根路由无上级页面时，错误显示返回按钮
• 内置HeaderBackButton支持通过props自定义大小、颜色、点击态、返回文字等样式，可直接查阅官方类型定义按需配置

内容的提问来源于stack exchange，提问作者johny_SK