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 了解有关生命周期方法的更多信息。

React Native - 重新运行渲染方法

React Native - Rerunning the render method

dynamic

react-native

react-lifecycle