navigationOptions 中的 React-Navigation 条件

Question

如果我有未读消息，如何使用 if 语句 return 不同的图标？或者我不会使用 if 语句？也许在某事上设置状态？不确定这里的最佳路线。

static navigationOptions = {
tabBarIcon: ({ focused }) => (
  focused 
  ? <Icon name="ios-mail" 
    style={styles.activeIconRight} 
    />
  : <Icon name="ios-mail"
    style={styles.inActiveIconRight}
    />
),

}

updateUnread = () => {
    if (this.state.unread == true) {
      this.props.navigation.setParams({otherParam: 'NEW'})
    } else {
      this.props.navigation.setParams({otherParam: ' '})
    }
  }

Answer 1

假设您有一个图标表示未读（这里称为 ios-mail-new），那么。

static navigationOptions = ({navigation}) => {
    const { params } = navigation.state;
    tabBarIcon: ({ focused }) => (
      if(params.otherParams === 'NEW') {
        <Icon name="ios-mail-new" 
         style={[styles.activeIconRight, focused && styles.inActiveIconRight]} 
        />
      }
      else {
        <Icon name="ios-mail" 
         style={[styles.activeIconRight, focused && styles.inActiveIconRight]}
        />
      }
),

这里的关键是获取 navigation 作为传入的参数。

navigationOptions 中的 React-Navigation 条件

React-Navigation conditionals in navigationOptions

react-native

react-navigation