组件即使在 componentWillMount 方法上也能渲染？

Question

class LoginScreen extends Component {
  componentWillMount() {
    const { currentUser } = firebase.auth();
    console.log(currentUser);
    if (currentUser) {
      Actions.mainScreen();
    }
  }

  render(){...}
}

基本上这个想法很简单，一旦用户来到LoginScreen，它会检查用户是否存在，如果存在，而不是渲染这个组件，而是重定向到另一个组件。

上述代码的问题在于，LoginScreen 在渲染mainScreen 之前仍然会到达render 1 到2 秒。想知道这是否是在React-Native-Router-Flux 中有条件地处理此类路由的方法？

Answer 1

解决这个问题。声明一个状态

state = {
   isChecking: true
}

在你的组件WillMount

componentWillMount() {
firebase.auth().onAuthStateChanged(user => {
  if (user) {
    Actions.mainScreen();
  } else {
    this.setState({ isChecking: false });
  }
});
} 

或者更好的是使用 async/await 语法

async componentWillMount() {
let user = await firebase.auth().onAuthStateChanged;
user ? Actions.mainScreen() : this.setState({ isChecking: false });

首先在您的渲染方法中，检查您何时仍在检查。如果是这样，只需渲染一个activityIndi​​cator。在渲染方法的最顶端检查您是否仍在检查。

render() {
if (this.state.isChecking) {
  return (
    <View
      style={{ justifyContent: "center", alignItems: "center", flex:1 }}
    >
      <ActivityIndicator size={"large"} />
    </View>
  );
   // rest of your loginScreen components
}