尝试使用AsyncStorage变量有条件地呈现内容。
我的应用使用了createBottomTabNavigator
中的react-navigation
。我有一个名为 Settings 的标签,该标签必须根据用户是否登录(检查AsyncStorage)有条件地呈现内容。以下代码可在第一个渲染器上运行,但另一个选项卡可以更新AsyncStorage值,返回到 Settings (设置)选项卡,它仍会渲染初始内容。
我可以使用哪种方法来实现这一目标,我也在尝试使用 shouldComponentUpdate ,但是我不确定它是如何工作的。
import React, {Component} from 'react';
class Settings extends React.Component{
constructor(props){
super(props);
this.state = {
isLoggedIn:false
};
}
//I want to use this method but not sure how.
shouldComponentUpdate(nextProps, nextState){
// return this.state.isLoggedIn != nextState;
}
componentDidMount(){
console.log("componentWillUpdate..");
this.getLocalStorage();
}
getLocalStorage = async () => {
try {
const value = await AsyncStorage.getItem('username');
if(value !== null) {
this.setState({isLoggedIn:true});
}
} catch(e) {
// error reading value
}
}
render() {
if(this.state.isLoggedIn)
{
return(
<View>
<Text style={styles.title_header}>Logged In</Text>
</View>
);
}
else{
return(
<View>
<Text style={styles.title_header}>Logged Out</Text>
</View>
);
}
}
}
export default Settings;
})
答案 0 :(得分:1)
问题来自于反应导航createBottomTabNavigator
。首次访问时,该组件已安装,因此调用componentDidMount
,一切都很好。
但是,当您切换标签页时,该组件将未卸载,这意味着当您返回标签页时,将不会再有新的呼叫componentDidMount
。
您应该做的是在willFocus
事件中添加一个侦听器,以了解用户何时切换回该标签。
componentDidMount() {
this.listener = this.props.navigation.addListener('willFocus', () => {
AsyncStorage.getItem('username').then((value) => {
if (value !== null) {
this.setState({ isLoggedIn: true });
}
catch(e) {
// error reading value
}
});
});
}
在卸载组件时,别忘了删除侦听器:
componentWillUnmount() {
this.listener.remove();
}
答案 1 :(得分:1)
使用NavigationEvents。将事件侦听器添加到您的Settings
组件中。
onWillFocus-事件监听器
onDidFocus-事件监听器
onWillBlur-事件侦听器
onDidBlur-事件侦听器
例如,当下一个屏幕聚焦时,将触发以下内容。
focusSubscription = null;
onWillFocus = payload => {
// get values from storage here
};
componentDidMount = () => {
this.focusSubscription = this.props.navigation.addListener(
'willFocus',
this.onWillFocus
);
};
componentWillUnmount = () => {
this.focusSubscription && this.focusSubscription.remove();
this.focusSubscription = null;
};