Question

嘿伙计们，我一直试图解决这个问题而没有运气。

我目前正在使用react-native创建一个项目，同时在我的Mac OS上运行模拟器。

我正在对应用进行编码，直到我达到了必须在“app.js”中有条件地呈现某些标签的程度。

这只是在虫子之前，而且工作很精细：

import React, { Component } from 'react';
import firebase from 'firebase';

import { View, Text } from 'react-native';
import { Header, Button } from './components/common';
import LoginForm from './components/LoginForm';

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

  componentWillMount() {
    console.log(this.state);

    firebase.initializeApp({
      apiKey: 'AIzaSyB4YTQAkin5epZ4nCl8kJSNhQdBn9c8tbY',
      authDomain: 'auth-79bfa.firebaseapp.com',
      databaseURL: 'https://auth-79bfa.firebaseio.com',
      projectId: 'auth-79bfa',
      storageBucket: 'auth-79bfa.appspot.com',
      messagingSenderId: '1089451858009'
    });

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

  render() {
    return (
      <View style={styles.viewContainer}>
        <Header headerText={'Authentication'} />
        <LoginForm />
      </View>
    );
  }

}

const styles = {
  viewContainer: {
    height: '100%'
  }
};

export default App;

在此之后我添加了一个辅助函数来有条件地渲染一些JSX。在这里你可以看到添加了renderContent（）函数的同一个类：

import React, { Component } from 'react';
import firebase from 'firebase';

import { View, Text } from 'react-native';
import { Header, Button } from './components/common';
import LoginForm from './components/LoginForm';

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

  componentWillMount() {
    console.log(this.state);

    firebase.initializeApp({
      apiKey: 'AIzaSyB4YTQAkin5epZ4nCl8kJSNhQdBn9c8tbY',
      authDomain: 'auth-79bfa.firebaseapp.com',
      databaseURL: 'https://auth-79bfa.firebaseio.com',
      projectId: 'auth-79bfa',
      storageBucket: 'auth-79bfa.appspot.com',
      messagingSenderId: '1089451858009'
    });

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

  renderContent() {
    if (this.state.loggedIn) {
      return (
        <Button buttonText='Log Out' />
      );
    } else if (this.state.loggedIn === null) {
      return (
        <Text> Loading... </Text>
      );
    } else if (!this.state.loggedIn) {
      return (
        <LoginForm />
      );
    }
  }

  render() {
    return (
      <View style={styles.viewContainer}>
        <Header headerText={'Authentication'} />
        {this.renderContent()}
      </View>
    );
  }

}

const styles = {
  viewContainer: {
    height: '100%'
  }
};

export default App;

只需添加此辅助函数，整个应用程序就会破坏!!我启动应用程序，我实际上看到“正在加载...”文本，直到firebase响应，然后应用程序崩溃。它只是退出到主屏幕或给我臭名昭着的红色屏幕，出现以下错误：

Runtime is not ready for debugging.
 - Make sure Packager server is running.
- Make sure the JavaScript Debugger is running and not paused on a breakpoint or exception and try reloading again.

这真的让我失望，我希望你们中的任何人都可以帮助我！

这些是我的依赖项：

"dependencies": {
    "firebase": "^4.1.3",
    "react": "16.0.0-alpha.12",
    "react-native": "0.46.1"
},

Answer 1

尝试在帮助函数中添加Timeout。即使firebase尚未完成设置您的loggedIn状态，也许辅助函数已经在检查您的状态的内容。如果它运行，那么尝试确保你的助手函数等待你的firebase函数在它触发之前完成。

“运行时尚未准备好进行调试。”错误或我错过了什么？

1 个答案: