React Native Navigation 左侧文字与图片的切换

1). 遇到的问题

在navigationOptions中静态配置无效, 最初的代码如下，经测试无效。

  static navigationOptions = ({ navigation }) => ({
    headerTitle: '推荐',
    headerLeft: (
      store.isLogin ?
        <View style={{ marginLeft: 15 }}>
          <TouchableOpacity onPress={() => {
            OverlayShow.show();
          }}
          >
            <Image source={require('../../image/cela.png')}/>
          </TouchableOpacity>
        </View>
        :
        <View style={{ marginLeft: 15 }}>
          <TouchableOpacity onPress={() => {
            OverlayShow.show();
          }}
          >
            <Text style={{ fontSize: 16, color: Color.glod, marginTop: 4 }}>登录</Text>
          </TouchableOpacity>
        </View>
    ),
    gesturesEnabled: false
  });

2). 解决方法

使用组件的方法将动态修改的地方抽取出来

3). 定义组件

@observer
export default class LoginOrCela extends PureComponent {
  
  componentDidMount() {
    // 监听登陆成功事件
    this.listener = RCTDeviceEventEmitter.addListener(LOGINSUCCESS, () => {
      this.props.store.isLogin = true;
    });
    // 监听退出登陆事件
    this.listener = RCTDeviceEventEmitter.addListener(LOGOUTSUCCESS, () => {
      this.props.store.isLogin = false;
    });
  }
  
  componentWillUnmount() {
    this.listener && this.listener.remove();
    this.listener = null;
  }
  
  render() {
    if (this.props.store.isLogin) {
      return (
        <Image source={require('../image/cela.png')}/>
      );
    } else {
      return (
        <Text style={{ fontSize: 16, color: Color.glod, marginTop: 4 }}>登录</Text>
      );
    }
  }
}

4). navigationOptions中使用

static navigationOptions = ({ navigation }) => ({
    headerTitle: '推荐',
    headerLeft: (
        <View style={{ marginLeft: 15 }}>
          <TouchableOpacity onPress={() => {
            OverlayShow.show();
          }}
          >
            <LoginOrCela store={store} />
          </TouchableOpacity>
        </View>
    ),
    gesturesEnabled: false
  });

5). 最终效果

登录前左侧显示登录两个字，登录成功之后，左侧显示图片