反应原生导航 onAuthStateChanged

Posted 2023-02-22

【中文标题】反应原生导航 onAuthStateChanged

【英文标题】：React Native Navigate onAuthStateChanged

【发布时间】：2017-06-09 10:15:14

【问题描述】：

当 Firebase 判断用户是否登录时，我正在尝试执行导航方法：

/



import React,  Component, PropTypes  from 'react';
import * as firebase from 'firebase';
import 
  AppRegistry,
  Image,
  StyleSheet,
  TextInput,
  Navigator,
  TouchableHighlight,
  Button,
  Text,
  View
 from 'react-native';



firebase.initializeApp(
);

 class Login extends Component 



   navigate(routeName) 
    this.props.navigator.push(
      name: routeName
    );
  

  constructor(props) 
    super(props);
    this.state = 
      username_text: 'Username',
      password_text: 'Password'
    ;
  


  render() 



    return (
      <View>

        <TouchableHighlight onPress= this.navigate.bind(this,'register') style=styles.button>
          <Text style=styles.buttonText>
            Logiiiiiiin
          </Text>
        </TouchableHighlight>
      </View>
    );
  


firebase.auth().onAuthStateChanged(user => 
  if (!user) 
    var login = new Login(navigator);
    login.navigate(this,'register')
  
);


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  ,
  background: 
    flex: 1,
    resizeMode: 'cover'
  ,
  button: 
    height: 50,
    backgroundColor: '#000000',
    alignItems: 'center',
    marginTop: 10,
    justifyContent: 'center'
  ,
  buttonText: 
    fontSize: 22,
    color: '#FFF',
    alignSelf: 'center'
  
);

export default Login

索引文件：

import React,  Component  from 'react';
import 
  AppRegistry,
  Image,
  StyleSheet,
  TextInput,
  Navigator,
  TouchableHighlight,
  Button,
  Text,
  View
 from 'react-native';

import LoginScreen from './login';
import RegisterScreen from './register';







 class Test extends Component 


   renderScene(route, navigator)
     console.log(route);
     if(route.name == 'login')
       return <LoginScreen navigator = navigator/>
     
     if(route.name == 'register')
       return <RegisterScreen navigator = navigator/>
     

   


   render() 

     return (



       <View style=styles.container>


       <Navigator
          initialRoute=name: 'login'
          renderScene=this.renderScene.bind(this)
        />


       </View>

     )
   




const styles = StyleSheet.create(
  container: 
    flex: 1,
    backgroundColor: '#F5FCFF',
  ,
);

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

目前我收到以下错误：

undefined 不是一个对象（评估 'this.props.navigator.push'）

指向navigate 方法的this.props.navigator.push( 行

【参考方案1】：

你用两种方式创建Login组件，其中一种是错误的：

firebase.auth().onAuthStateChanged(user => 
    if (!user) 
        var login = new Login(navigator); // <-- Navigator is not defined!!
        login.navigate(this,'register')
    
);

相反，您可以将代码用于在 Login 组件内监听 firebase 身份验证状态，例如像这样：

class Login extends Component 

    constructor(props) 
        super(props);
        this.state = 
            username_text: 'Username',
            password_text: 'Password'
        ;
    

    componentWillMount() 
        // Add listener here
        this.unsubscribe = firebase.auth().onAuthStateChanged(user => 
            if (!user) 
                this.navigate('register');
            
        );
    

    componentWillUnmount() 
        // Don't forget to unsubscribe when the component unmounts
        this.unsubscribe();
    

    navigate(routeName) 
        this.props.navigator.push(
            name: routeName
        );
    

    render() 
        return (
            <View>
                <TouchableHighlight onPress= this.navigate.bind(this,'register') style=styles.button>
                    <Text style=styles.buttonText>
                        Logiiiiiiin
                    </Text>
                </TouchableHighlight>
            </View>
        );