ReactNative-ログインしたFirebaseユーザーをホームコンポーネントにリダイレクトします

szier

私の目標はHome、ユーザーがすでにログインしている場合にユーザーをコンポーネントにリダイレクトすることです。ユーザーにログインして、が呼び出されたHome場合のみリダイレクトすることができます_logInUser()ただし、Homeコンポーネントにリダイレクトされた後、シミュレーターを更新すると、アプリはLoginコンポーネントに戻ります。

を使用componentWillMount()して設定してこれを解決しようとしましたlet user = firebaseApp.auth().currentUserただし、userコンソールにログを記録したこともありますが、ifチェックはelseステートメントに直接反映されているようです。洞察をいただければ幸いです。

これが私のコードです(私はreact-native-router-fluxルーティングに使用しています):

index.ios.js

import React, { Component } from 'react';
import { Scene, Router } from 'react-native-router-flux';
import {
  AppRegistry,
} from 'react-native';

// Components
import Login from './components/user/login/login';
import Home from './components/user/home/home';

class AppName extends Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene key="login" component={Login} title="Login" hideNavBar={true} initial={true}/>
          <Scene key="home" component={Home} title="Home"/>
        </Scene>
      </Router>
    );
  }
}


AppRegistry.registerComponent('AppName', () => AppName);

login.js

import React, { Component } from 'react';
import {
  AlertIOS,
  Dimensions,
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View
} from 'react-native';

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { Actions } from 'react-native-router-flux';

import firebaseApp from 'AppName/firebase_setup';

// Set width and height to screen dimensions
const { width, height } = Dimensions.get("window"); 

// For Firebase Auth
const auth = firebaseApp.auth();

// Removed styles for StackOverflow

export default class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
      password: ''
    }
  }

  componentWillMount() {
    let user = auth.currentUser;
    if (user != null) {
      console.log(user);
      Actions.home
    } else {
      return;
    }
  }

  render() {
    return (
      <View style={styles.mainContainer}>
        <KeyboardAwareScrollView 
          style={styles.scrollView}
          keyboardShouldPersistTaps={false}
          automaticallyAdjustContentInsets={true}
          alwaysBonceVertical={false}
        >
          <View style={styles.loginContainer}>

            <View style={styles.inputContainer}>

              <TextInput
                style={styles.formInput}
                placeholder="Email"
                keyboardType="email-address"
                autoFocus={true}
                autoCorrect={false}
                autoCapitalize="none"
                onChangeText={(email) => this.setState({email})}
              />

              <TextInput
                style={styles.formInput}
                secureTextEntry={true}
                placeholder="Password"
                autoCorrect={false}
                autoCapitalize="none"
                onChangeText={(password) => this.setState({password})}
              />

              <TouchableOpacity 
                style={styles.loginButton}
                onPress={this._logInUser.bind(this)}
              >
                <Text style={styles.loginButtonText}>Log In</Text>
              </TouchableOpacity>

              <TouchableOpacity>
                <Text style={styles.toSignupButton}>Dont have an account? Create one!</Text>
              </TouchableOpacity>

            </View>
          </View>

          <View style={styles.footer}>
            <Text style={styles.footerText}>
              By signing up, I agree to TextbookSwap's <Text style={styles.footerActionText}>Terms of Service</Text> and <Text style={styles.footerActionText}>Privacy Policy</Text>.
            </Text>
          </View>
        </KeyboardAwareScrollView>
      </View>
    );
  }

  _logInUser() {
    let email = this.state.email;
    let password = this.state.password;

    auth.signInWithEmailAndPassword(email, password)
      .then(Actions.home)
      .catch((error) => {
        AlertIOS.alert(
          `${error.code}`,
          `${error.message}`
        );
      });
  }
}
コンスタンチン・クズネツォフ

まず、ログインコンポーネントで、currentUserを同期的にチェックしていますが、componentWillMountではまだ利用できない可能性があります。非同期で参加する必要があります。

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

ほとんどのActions.home()場合、ユーザーがログインしていれば電話で十分です。ただし、アプリが大きくなるにつれて、このロジックをログイン画面から上に移動することをお勧めします。カイルが提案したように、スイッチ機能を使用できます。これは通常(ドキュメントを引用するために)次のようにreduxで使用されます:

const RootSwitch = connect(state => ({loggedIn: state.transient.loggedIn}))(Switch);
const rootSelector = props => props.loggedIn ? 'workScreens' : 'authScreens';

const scenes = Actions.create(
   <Scene key="root" tabs={true} component={RootSwitch} selector={rootSelector}>
     <Scene key="authScreens" hideNavBar={true}>
       <Scene key="login" component={Login} initial={true}/>
       <Scene key="register" component={Register} />
       ...
     </Scene>
     <Scene key="workScreens">
       <Scene key="home" component={Home} initial={true}/>
       <Scene key="profile" component={ProfileMain}/>
       ...
     </Scene>
   </Scene>
);

reduxを使用したくない場合は、react-reduxの接続を使用する代わりに手動でSwitchをラップし、loggedInpropをSwitchに渡すことができます。たとえば、このラッパーで次のようなFirebaseonAuthStateChangedをリッスンできます。

class FirebaseSwitch extends Component {

  state = {
    loggenIn: false
  }

  componentWillMount() {
    firebase.auth().onAuthStateChanged( user =>
      this.setState({loggedIn: !!user})
    );
  }

  render() {
    return <Switch loggedIn={this.state.loggedIn} {...this.props}/>;
  }
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

プログラムでReactNativeにコンポーネントを追加します

分類Dev

ReactNativeのコンポーネントとして凝視をレンダリングします

分類Dev

ReactNativeを介したコンポーネントオーバーレイ

分類Dev

ReactNative-親コンポーネントから子コンポーネントを再レンダリングします

分類Dev

ReactNativeで特定のコンポーネントをレンダリングする

分類Dev

ReactNativeアプリがコンポーネントをレンダリングしていません

分類Dev

WebビューからReactNativeコンポーネントにリダイレクトする

分類Dev

AWSは、ReactNativeアプリにログインしたユーザーを覚えています

分類Dev

ReactNativeの関数を使用してコンポーネントをレンダリングする方法

分類Dev

コンポーネントがreactnativeで期待どおりに画像をレンダリングしない

分類Dev

React-Router-Nativeを使用してReactNativeのAxiosインターセプター(コンポーネントの外部)からビューコンポーネントにリダイレクトする

分類Dev

reactnativeを使用したコンポーネントライブラリの作成

分類Dev

ReactNativeはレンダリング前にネットワーク呼び出しを行います

分類Dev

map()イテレータ内でレンダリングされないReactNativeコンポーネント

分類Dev

ReactNativeボタンクリックレンダリングさまざまなコンポーネント

分類Dev

ReactNative-カスタムコンポーネントのインポート中にナビゲーションエラーが発生しました

分類Dev

現在レンダリングされているコンポーネントReactNativeの上にActivityIndicatorを表示します

分類Dev

ReactNativeはあるコンポーネントを別のコンポーネントに渡します

分類Dev

ReactNativeの親コンポーネントの特定の座標にコンポーネントを配置します

分類Dev

ReactNativeはあるコンポーネントを別のコンポーネントに挿入します

分類Dev

javascriptライブラリをReactNativeにインポートします

分類Dev

ReactNativeコンポーネントのインポート

分類Dev

カスタムReactNative / Expoオーディオプレーヤーコンポーネントでスクラブを有効にしますか?

分類Dev

ReactNativeを使用してWordpressでユーザーログインする方法

分類Dev

ReactNativeでカレンダーコンポーネントを作成する

分類Dev

状態が認証コンポーネントを変更した後、ReactNativeレンダリングビューが更新されない

分類Dev

ReactNativeでテーマプロバイダーコンポーネントを作成する

分類Dev

抽出されたReactNativeコンポーネントは私またはクライアントに属しますか?

分類Dev

別のコンポーネントがレンダリングされた後に1つのReactNativeコンポーネントをレンダリングするにはどうすればよいですか?

Related 関連記事

  1. 1

    プログラムでReactNativeにコンポーネントを追加します

  2. 2

    ReactNativeのコンポーネントとして凝視をレンダリングします

  3. 3

    ReactNativeを介したコンポーネントオーバーレイ

  4. 4

    ReactNative-親コンポーネントから子コンポーネントを再レンダリングします

  5. 5

    ReactNativeで特定のコンポーネントをレンダリングする

  6. 6

    ReactNativeアプリがコンポーネントをレンダリングしていません

  7. 7

    WebビューからReactNativeコンポーネントにリダイレクトする

  8. 8

    AWSは、ReactNativeアプリにログインしたユーザーを覚えています

  9. 9

    ReactNativeの関数を使用してコンポーネントをレンダリングする方法

  10. 10

    コンポーネントがreactnativeで期待どおりに画像をレンダリングしない

  11. 11

    React-Router-Nativeを使用してReactNativeのAxiosインターセプター(コンポーネントの外部)からビューコンポーネントにリダイレクトする

  12. 12

    reactnativeを使用したコンポーネントライブラリの作成

  13. 13

    ReactNativeはレンダリング前にネットワーク呼び出しを行います

  14. 14

    map()イテレータ内でレンダリングされないReactNativeコンポーネント

  15. 15

    ReactNativeボタンクリックレンダリングさまざまなコンポーネント

  16. 16

    ReactNative-カスタムコンポーネントのインポート中にナビゲーションエラーが発生しました

  17. 17

    現在レンダリングされているコンポーネントReactNativeの上にActivityIndicatorを表示します

  18. 18

    ReactNativeはあるコンポーネントを別のコンポーネントに渡します

  19. 19

    ReactNativeの親コンポーネントの特定の座標にコンポーネントを配置します

  20. 20

    ReactNativeはあるコンポーネントを別のコンポーネントに挿入します

  21. 21

    javascriptライブラリをReactNativeにインポートします

  22. 22

    ReactNativeコンポーネントのインポート

  23. 23

    カスタムReactNative / Expoオーディオプレーヤーコンポーネントでスクラブを有効にしますか?

  24. 24

    ReactNativeを使用してWordpressでユーザーログインする方法

  25. 25

    ReactNativeでカレンダーコンポーネントを作成する

  26. 26

    状態が認証コンポーネントを変更した後、ReactNativeレンダリングビューが更新されない

  27. 27

    ReactNativeでテーマプロバイダーコンポーネントを作成する

  28. 28

    抽出されたReactNativeコンポーネントは私またはクライアントに属しますか?

  29. 29

    別のコンポーネントがレンダリングされた後に1つのReactNativeコンポーネントをレンダリングするにはどうすればよいですか?

ホットタグ

アーカイブ