React-Native-Router-Flux：隐藏返回按钮文本标签的方法

我之前在RN 0.46.4版本搭配React-Native-Router-Flux开发时，也遇到过一模一样的问题——想单独去掉返回按钮的文本标签，但直接设left={()=>null}会把整个按钮都藏起来，用headerLeft也没达到预期效果。下面给你两个亲测有效的方案：

方案一：自定义仅含图标的返回按钮 #

这是最直接稳妥的办法，我们自己写一个只带返回图标的按钮，替换掉默认的返回按钮组件：

首先确保你已经安装了图标库（比如react-native-vector-icons，如果没装的话可以先安装），然后在你的页面路由配置里这样写：

import Icon from 'react-native-vector-icons/Ionicons';
import { TouchableOpacity } from 'react-native';
import { Actions } from 'react-native-router-flux';

// 自定义返回按钮组件
const CustomBackButton = () => (
  <TouchableOpacity 
    onPress={() => Actions.pop()} 
    style={{ paddingHorizontal: 15 }}
  >
    <Icon name="ios-arrow-back" size={24} color="#333" />
    {/* 这里不添加任何文本元素，只保留图标 */}
  </TouchableOpacity>
);

// 在Scene配置中使用自定义按钮
<Scene
  key="targetScene"
  component={YourPageComponent}
  title="页面标题"
  left={() => <CustomBackButton />}
/>

这样就只会显示返回图标，完全不会有文本标签。如果不想用第三方图标库，也可以用RN自带的Image组件导入本地的返回图标资源。

方案二：通过样式隐藏默认返回按钮的文本 #

如果你不想自定义组件，也可以用hack一点的方式，通过样式隐藏默认返回按钮的文本部分：

import { TouchableOpacity, Text, View } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { Actions } from 'react-native-router-flux';

<Scene
  key="targetScene"
  component={YourPageComponent}
  title="页面标题"
  left={() => (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      {/* 保留返回图标和点击逻辑 */}
      <TouchableOpacity 
        onPress={() => Actions.pop()} 
        style={{ paddingHorizontal: 15 }}
      >
        <Icon name="ios-arrow-back" size={24} color="#333" />
      </TouchableOpacity>
      {/* 通过绝对定位+透明度隐藏文本 */}
      <Text style={{ opacity: 0, position: 'absolute', left: -9999 }}>返回</Text>
    </View>
  )}
/>

这个方案本质是保留默认返回按钮的结构，但把文本移出可视区域，虽然能实现效果，但不如自定义组件灵活，更推荐方案一。

需要注意的是，在RN 0.46.4版本中，React-Native-Router-Flux的left属性优先级高于默认返回按钮，所以自定义left组件会完全替换默认按钮，这样就能精准控制显示内容了。

内容的提问来源于stack exchange，提问作者y2k-shubham