Question

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

  render(){...}
}

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

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

Answer 1

解决这个问题。宣布一个州

state = {
   isChecking: true
}

componentWillMount中的

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

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

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

组件得到渲染甚至在componentWillMount方法上路由？

1 个答案: