在 react native 中有条件地渲染头。

Question

嗨，我想根据状态来渲染头像，如果状态等于true，我就会显示一个头像，如果是false，我就会渲染一个默认的logo。如果状态等于true，我就会显示一个头像，如果状态为false，我就会渲染一个默认的标志。我试过基于三元操作符来做这件事，但没有成功。下面是代码。

static navigationOptions = ({navigation}) => {
        const { params } = navigation.state;
        return {
          headerTitle: () => (
            <View style ={{alignItems: 'center', justifyContent: 'center',flex:1, flexDirection:'column', overflow:'visible'}}>
                 {this.state.Loaded == false ?
                    <View style ={{alignItems: 'center', justifyContent: 'center',flex:1, flexDirection:'column', overflow:'visible'}}> 
                        <Text style={{marginBottom:15,fontSize:20,fontWeight:"900", color:'#000' }}>Pseudo</Text>
                        <Image
                            style = {styles.avatar}
                            source = {require('../../../Assets/avatar.jpg')} />
                    </View>
                    :
                    <View style={[styles.bandeauHeader, {  } ]}>
                    <Text style={styles.textHeader}>Aide</Text>
                    <Image source={GlobalInclude.LogoIconRose} style={styles.logoBandeauHeader} />
                    </View>
                }      
            </View>
          )
        };
    };

Answer 1

你应该考虑把导航更新到新的版本。

首先，状态在静态函数中是不可用的，所以你必须使用导航参数来更新头。

代码应该是类似下面的东西，你可以在你的解决方案中采用。

class DetailsScreen extends React.Component {
  state = {
    flag: true,
  };

  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: navigation.getParam('flag') ? (
        <Text>12323231321</Text>
      ) : (
        <Text>67676777</Text>
      ),
    };
  };

  render() {
    const { navigation } = this.props;

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>

        <Button
          title="Update the title"
          onPress={() =>
            this.setState({ flag: !this.state.flag }, () =>
              this.props.navigation.setParams({ flag: this.state.flag })
            )
          }
        />
      </View>
    );
  }
}