如何在所有页面渲染相同组件？StackNavigator统一headerRight配置问询

嘿，你这段代码已经完美实现了给所有页面统一设置headerRight图标的需求，思路非常正确！我来帮你拆解下这段代码的逻辑，再分享几个能让这个方案更灵活的小技巧：

你的核心实现解析 #

你通过在StackNavigator的全局配置项里定义navigationOptions，让所有注册到这个导航器的页面自动继承这个右上角图标配置，代码如下：

export default StackNavigator( {
  Authorization: { screen: AuthorizationScreen },
  SignIn: { screen: SignInScreen },
  SignUp: { screen: SignUpScreen },
  Main: { screen: MainScreen },
  Language: { screen: LanguageScreen },
  //...其他页面
}, {
  navigationOptions: {
    headerRight: ( 
      <Icon color={'#77767c'} name='ios-contact-outline' size={30} style={{ paddingRight: 30}} type='ionicon' />
    ),
  }
} )

• 这里的navigationOptions是全局导航配置，优先级低于单个页面自身定义的导航选项
• 所有在StackNavigator里注册的屏幕（Authorization、SignIn等）都会默认带上这个灰色的联系人图标

实用扩展技巧 #

如果之后需要对某个页面做特殊处理，比如隐藏图标、修改图标或者添加交互，完全不用改动全局配置，只需要在对应页面的组件里单独定义navigationOptions即可：

1. 单独隐藏某页面的headerRight #

比如想让SignIn页面不显示这个图标，直接在SignInScreen组件里覆盖全局配置：

class SignInScreen extends Component {
  static navigationOptions = {
    headerRight: null, // 直接设为null就能隐藏全局的图标
  };

  // 组件其他业务逻辑...
}

2. 给全局图标添加点击交互 #

如果需要这个图标能跳转到个人中心页面，只需要把Icon包在TouchableOpacity里，再利用navigation参数实现跳转：

navigationOptions: ({ navigation }) => ({
  headerRight: ( 
    <TouchableOpacity 
      onPress={() => navigation.navigate('Profile')}
      style={{ paddingRight: 30 }}
    >
      <Icon color={'#77767c'} name='ios-contact-outline' size={30} type='ionicon' />
    </TouchableOpacity>
  ),
})

3. 根据页面动态切换图标 #

要是不同页面需要显示不同的headerRight图标，可以在全局配置里根据当前路由名称判断：

navigationOptions: ({ navigation }) => ({
  headerRight: () => {
    const currentRoute = navigation.state.routeName;
    // 根据当前页面调整图标名称
    const iconName = currentRoute === 'Main' ? 'ios-settings-outline' : 'ios-contact-outline';
    
    return (
      <Icon color={'#77767c'} name={iconName} size={30} style={{ paddingRight: 30}} type='ionicon' />
    );
  },
})

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