React Native - перезапуск метода рендеринга - PullRequest
Новая
       36

React Native - перезапуск метода рендеринга

0 голосов
/ 01 апреля 2020

У меня есть файл, который определяет значок для заголовка. 

    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 show. Проблема в том, что я делаю это в componentDidMount, значок не меняется без обновления страницы. Как мне сделать это снова?

1 Ответ

0 голосов
/ 01 апреля 2020

componentDidMount вызывается, как следует из названия, только один раз, когда компонент монтируется. Используйте componentDidUpdate, чтобы решить, как ваш компонент будет себя вести, основываясь на том, что элемент props или state изменился.

Прочтите документацию для получения дополнительной информации о методах жизненного цикла.

...