使用React Native正确处理注销

Question

我有一个react本机应用程序,根据是否有经过身份验证的firebase用户显示不同的导航器.

这是我的主要App类:

export default class App extends Component {
  state = { loggedIn: null }

  componentWillMount() {
    firebase.initializeApp({...});

    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.setState({ loggedIn: true });
      } else {
        this.setState({ loggedIn: false });
      }
    });
  }

  renderContent() {
    switch (this.state.loggedIn) {
      case true:
        return (
          <MenuContext>
            <MainNavigator />
          </MenuContext>
        );
      case false:
        return (
          <AuthNavigator />
        );
      default:
        return (
          <View style={styles.spinnerStyle}>
            <Spinner size="large" />
          </View>
        );
    }
  }

  render() {
    return (
      <Provider store={store}>
        {this.renderContent()}
      </Provider>
    );
  }
}

现在,当用户登录时,重新渲染正确的Navigator可以很好地工作.

我遇到的问题是退出.在我MainNavigator(用户登录时显示的那个)中,我有一个注销按钮,用于将用户注销.像这样实现:

signOutUser = async () => {
    try {
        await firebase.auth().signOut();
    } catch (e) {
        console.log(e);
    }
}

render() {
    return (
        ...
        <Button title="logout" onPress={() => this.signOutUser()} />
    )
}

这可以达到预期效果,但是,我得到以下警告我要解决的问题:

警告:只能更新已安装或安装的组件.这通常意味着您在已卸载的组件上调用了setState,replaceState或forceUpdate.这是一个无操作.

实现此注销功能的最佳实践方法是什么？

编辑:我正在使用该react-navigation库来管理我的应用程序导航.

Answer 1

我认为根据应用程序组件的状态生成导航器可能很危险,并可能导致此问题.注销时,您应该重定向到负责注册或登录的组件,并且不要让负责此操作的状态重新生成另一个导航的一部分.

您可以做的是在App Component中,而不是返回MainNavigator或AuthNavigator,您可以返回两个Navigator并添加一个名为Loading的路由,例如,谁将呈现一个加载屏幕,谁将是负责路由您的应用程序的initialRoute取决于是否记录了用户.

这种情况下的StackNavigator示例

const Navigator = StackNavigator({
  Main: {
    screen: MainComponent,
  },
  Auth: {
    screen: AuthComponent,
  },
  Loading: {
    screen: LoadingComponent
  },
},{
    initialRouteName : 'Loading'
});

在您的LoadingComponent中,您将渲染您的微调器

render() {
  return(
    <View style={styles.spinnerStyle}>
      <Spinner size="large" />
    </View>
  );
}

在LoadingComponent的componentDidMount中:

firebase.auth().onAuthStateChanged(user => {
  if (user) {
      navigate('Home');
  } else {
      navigate('Login');
  }
});

这样,当您打开应用程序时,将显示加载屏幕,然后根据用户是否记录重定向到好页面.

并在您的signOutUser重定向到登录页面

signOutUser = async () => {
    try {
        await firebase.auth().signOut();
        navigate('Auth');
    } catch (e) {
        console.log(e);
    }
}