React Native：如何在导航选项中条件渲染headerRight？

没问题！我来教你怎么给React Native导航栏的headerRight做条件渲染，其实很简单，咱们一步步来：

首先，因为navigationOptions是静态方法，没办法直接访问组件的state或props（除非通过传入的navigation参数），所以我们通常会通过**导航参数（navigation params）**来传递控制渲染的条件，这样既灵活又能响应状态变化。

步骤1：设置控制条件的导航参数 #

你可以在组件的生命周期（比如componentDidMount）或者状态变化时，通过setParams把需要判断的条件传入导航参数：

componentDidMount() {
  // 这里根据你的业务逻辑设置true/false，比如从接口返回的数据判断，或者固定值
  const shouldShowHomeBtn = true;
  this.props.navigation.setParams({ showHomeButton: shouldShowHomeBtn });
}

// 如果条件依赖组件state，状态变化时也要同步更新参数
componentDidUpdate(prevProps, prevState) {
  if (prevState.someKey !== this.state.someKey) {
    this.props.navigation.setParams({ 
      showHomeButton: this.state.someKey 
    });
  }
}

步骤2：修改静态导航选项，添加条件渲染 #

接下来修改你的navigationOptions，从navigation中取出参数，用条件表达式控制headerRight的渲染：

static navigationOptions = ({ navigation }) => {
  // 取出导航参数，默认值设为false（不显示按钮）
  const showHomeButton = navigation.getParam('showHomeButton', false);

  return {
    title: i18N.t('atmbranchpickHeader'),
    // 用三元表达式实现条件渲染：满足条件就渲染按钮，否则返回null（不显示）
    headerRight: showHomeButton ? (
      <TouchableHighlight 
        underlayColor="#E22F39" 
        onPress={() => navigation.navigate("home")}
      >
        <Image 
          style={{ marginRight: 20 }} 
          source={require('../../resources/toolbar/home_white.png')} 
        />
      </TouchableHighlight>
    ) : null,
    headerTintColor: "white",
    headerStyle: { 
      backgroundColor: "#E22F39" 
    }
  };
};

简化写法：短路求值 #

如果你的条件逻辑很简单，也可以用**逻辑与（&&）**来简化代码，效果和三元表达式一样：

headerRight: showHomeButton && (
  <TouchableHighlight 
    underlayColor="#E22F39" 
    onPress={() => navigation.navigate("home")}
  >
    <Image 
      style={{ marginRight: 20 }} 
      source={require('../../resources/toolbar/home_white.png')} 
    />
  </TouchableHighlight>
),

这样就能完美实现headerRight的条件渲染啦！当showHomeButton为true时显示主页按钮，为false时就不会显示啦。

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