组件甚至在 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
}

在你的 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 方法上被路由出去？

components get render even routed out on componentWillMount method?

navigation

react-native

react-native-router-flux