React Native - 重新运行渲染方法

Question

我在这里有一个文件，它定义了标题的图标。

    static navigationOptions = ({ navigation }) => {
        return {
            headerRight: () => (<HomeHeaderIcon/>)
        }
    };

HomeHeaderIcon.js

export default class HomeHeaderIcon extends Component {
    async componentDidMount(){
        const token = await AsyncStorage.getItem('token');
        this.setState({token});
    }
    state={
        token:null
    };

    render() {
        return (
            <View>
                {
                    this.state.token ===null
                        ?
                        (
                            <TouchableOpacity
                                onPress={() => (NavigationService.navigate("LogStack"))}>
                                <Icon name="ios-power" size={30} style={{color: "white",marginRight:wp("5%")}}/>
                            </TouchableOpacity>
                        )
                        :
                        (
                            <TouchableOpacity
                                onPress={() => (NavigationService.navigate("Profile"))}>
                                <Icon name="ios-home" size={30} style={{color: "white",marginRight:wp("5%")}}/>
                            </TouchableOpacity>)
                }
            </View>
        );
    }
}

系统完全按照我的意愿运行。如果有令牌，我说 icon1 或 icon2 显示。问题是我在componentDidMount中这样做，图标在不刷新页面的情况下不会改变。如何重新渲染？

Answer 1

componentDidMount 顾名思义，只在组件安装时调用一次。使用componentDidUpdate 根据props 或state 的哪一部分发生了变化来决定组件的行为方式。

阅读documentation，了解有关生命周期方法的更多信息。