组件甚至可以在组件WillMount方法上路由

Question

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

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

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

Answer 1

为了解决这个问题。 声明状态

state = {
   isChecking: true
}

在您的组件中将挂载

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

或者更好的是使用异步/等待语法

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

首先在渲染方法中，检查是否仍在检查。如果是这样，只需渲染一个活动指示器。在渲染方法的最顶部检查您是否仍在检查。

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