React Native:基于AsyncStorage结果的条件render()

时间:2019-06-09 17:46:09

标签: react-native react-navigation

尝试使用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;

})

2 个答案:

答案 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;
};