React Nativeでログアウトを正しく処理する

Question

認証されたfirebaseユーザがいるかどうかに基づいて異なるナビゲータを表示する、反応するネイティブアプリケーションがあります。 。

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

私は、アプリケーションコンポーネントの状態に応じてナビゲータを生成することは危険であり、この問題につながる可能性があると考えています。ログアウト時には、登録またはログインを担当するコンポーネントにリダイレクトし、別のナビゲーションの一部を再生成することで、これを担当する州には任せないようにしてください。

あなたのできることは、MainNavigatorまたはAuthNavigatorを返すのではなく、アプリケーションコンポーネントにあります.Navigatorを両方返すと、Loadingという名前のルートを追加できます。ローディング画面を表示し、initialRouteを担当しますユーザーに応じてアプリをルーティングするかどうかはログに記録されます。あなたのLoadingComponentこの場合

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

とStackNavigatorの

例あなたのスピナー

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

をレンダリングしますLoadingComponentのcomponentDidMountで：そのロード画面で

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

あなたがあなたのアプリを開いてからthにリダイレクトすると表示されますユーザの良好なページがログに記録されているかどうか。

そして、あなたのsignOutUserには、ページ

あなたのナビゲーションに使用しないライブラリ

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