Question

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

})

Answer 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();
}

Answer 2

使用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;
};

React Native：基于AsyncStorage结果的条件render（）

2 个答案: