React Native + Firebase 登录错误:Undefind 不是对象(评估 'this.props.na

React Native + Firebase signin Error: Undefind is not object (evaluating 'this.props.navigator')

本文关键字：评估 na props this 对象 Firebase Native 登录 错误 Undefind React      更新时间：2023-09-26

我正在尝试创建一个简单的应用程序，允许用户使用Firebase作为后端进行注册和登录。

我正在使用Stephen Grider-ReactNativeCasts作为模板，我认为我在某种程度上成功地实现了firebase作为后端。我可以注册，并且用户会显示在 Firebase 信息中心的用户列表中，但当我尝试登录时，我收到错误：Undefind 不是对象（评估"this.props.navigator"）。

这是我的登录的样子，

var React = require('react-native');
var Firebase = require('firebase');
var {
  View,
  Text,
  StyleSheet,
  TextInput
} = React;
var Parse = require('parse/react-native');
var Button = require('../common/button');
module.exports = React.createClass({
  getInitialState: function() {
    return {
      email: '',
      password: '',
      errorMessage: ''
    };
  },
  render: function() {
    return (
      <View style={styles.container}>
        <Text>Sign In</Text>
        <Text style={styles.label}>Email:</Text>
        <TextInput
          style={styles.input}
          value={this.state.email}
          onChangeText={(text) => this.setState({email: text})}
          />
        <Text style={styles.label}>Password:</Text>
        <TextInput
          secureTextEntry={true}
          style={styles.input}
          value={this.state.password}
          onChangeText={(text) => this.setState({password: text})}
          />
        <Text style={styles.label}>{this.state.errorMessage}</Text>
        <Button text={'Sign In'} onPress={this.onPress} />
        <Button text={'I need an account...'} onPress={this.onSignupPress} />
      </View>
    );
  },
  onSignupPress: function() {
    this.props.navigator.push({name: 'signup'});
  },
  onPress: function() {
    var ref = new Firebase("https://reactapplogin.firebaseio.com");
    ref.authWithPassword({
      email    : this.state.email,
      password : this.state.password
    }, function(error, authData) {
      if (error) {
        console.log("Login Failed!", error);
      } else {
        console.log("Authenticated successfully with payload:", authData);
        this.props.navigator.immediatelyResetRouteStack({name: 'tweets'});
      }
    });
  }
});
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  input: {
    padding: 4,
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 5,
    margin: 5,
    width: 200,
    alignSelf: 'center'
  },
  label: {
    fontSize: 18
  }
});

我遇到了this.props.navigator.immediatelyResetRouteStack({name: 'tweets'});无法正常工作的问题，而且我也不知道这些控制台日志在模拟器中的显示位置（使用 Genymotion/Android Studio 模拟器），因此调试证明有点困难。我试图连接到chrome，但它一直失败。

任何帮助将不胜感激！谢谢！

斯蒂芬的项目Github页面：https://github.com/StephenGrider/ReactNativeCasts/tree/master/authentication

问题不在于Firebase，而在于您的实现。
您的道具上没有导航器，因为您没有使用导航器。在Stephen的项目Github页面中，你可以看到导航器被渲染，组件得到导航器道具。 

renderScene: function(route, navigator) {
    var Component = ROUTES[route.name]; // ROUTES['signin'] => Signin
    return <Component route={route} navigator={navigator} />;
},
render: function() {
    return (
      <Navigator
            style={styles.container}
            initialRoute={{name: 'signin'}}
            renderScene={this.renderScene}
            configureScene={() => { return Navigator.SceneConfigs.FloatFromRight; }}
      />
);

更新

看看src/main.js。
渲染的组件是反应本机导航器。在导航器上，您有一个调用 renderScene 函数的 renderScene 道具，该函数根据 ROUTES 对象返回正确的组件，并将其作为道具传递给导航器。

进行以下更改，您的程序应该可以工作，immediatelyResetRouteStack接受array而不是object 

this.props.navigator.immediatelyResetRouteStack({name: 'tweets'}); // wrong
this.props.navigator.immediatelyResetRouteStack([{name: 'tweets'}]); // right
相关文章：