javascript - 我在 Android 上运行应用程序时遇到问题

Question

我有一个 react native 应用程序，在我从博览会分离到纯 react native 后，这个错误开始出现，我是一个初学者，我对 react native 没有太多经验。

我尝试删除 node_modules 并使用 npm install 安装依赖项。我已经包含了 package.json 和 App.js

App screenshot

package.json

{
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "node ./node_modules/jest/bin/jest.js --watchAll"
  },
  "jest": {
    "preset": "react-native"
  },
  "dependencies": {
    "@babel/runtime": "^7.4.3",
    "@expo/samples": "2.1.1",
    "date-and-time": "^0.6.3",
    "expo-core": "^3.0.1",
    "expo-file-system": "^4.0.0",
    "expo-font-interface": "^3.0.0",
    "expo-image-loader-interface": "^3.0.0",
    "expo-permissions-interface": "^3.0.0",
    "expo-react-native-adapter": "^3.0.1",
    "firebase": "^5.7.2",
    "native-base": "^2.10.0",
    "react": "16.5.0",
    "react-native": "0.55.4",
    "react-native-animatable": "^1.3.1",
    "react-native-button": "^2.3.0",
    "react-native-datepicker": "^1.7.2",
    "react-native-dropdownalert": "^3.10.0",
    "react-native-elements": "^0.19.1",
    "react-native-firebase": "^5.2.3",
    "react-native-parallax-scroll-view": "^0.21.3",
    "react-native-ratings": "^6.3.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-status-bar-height": "^2.2.0",
    "react-native-unimodules": "^0.2.0",
    "react-native-vector-icons": "^6.4.2",
    "react-navigation": "^2.18.2",
    "scheduler": "^0.13.6"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "jest": "^24.7.1"
  },
  "private": true
}

App.js

import React from "react";
import { Platform, StatusBar, StyleSheet, View, Text } from "react-native";
import { Icon } from "react-native-elements";
import AppNavigator from "./navigation/AppNavigator";
import MainTabNavigator from "./navigation/MainTabNavigator";
import Firebase from "./Firebase";
import SplashScreen from 'react-native-splash-screen'

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoadingComplete: false,
      isUserLogged: false,
      isAuthenticationReady: false
    };

    Firebase.auth().onAuthStateChanged(this.onAuthStateChanged);
  }

  componentDidMount() {
    SplashScreen.hide();
  }

  componentWillUnmount() {
    this.onTokenRefreshListener();
    this.notificationDisplayedListener();
    this.notificationListener();
  }

  onAuthStateChanged = user => {
    this.setState({ isAuthenticationReady: true });
    this.setState({ isUserLogged: !!user });
  };

  render() {
    if (
      !this.state.isLoadingComplete &&
      !this.props.skipLoadingScreen &&
      !this.state.isAuthenticationReady
    ) { return <Text />
      /*return ( 
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
          autoHideSplash={true}
        />
      );*/
    } else {
      // As soon as app finishs loading and splash screen hides
      // Check if user loggedIn
      // Firebase.auth().onAuthStateChanged(user => {
      //   if (user) {
      //     this.setState({ isUserLogged: true });
      //     console.log(user.providerData[0].phoneNumber);
      //   } else {
      //     console.log("No user logged in yet!");
      //   }
      // });
      return (
        <View style={styles.container}>
          {Platform.OS === "ios" && <StatusBar barStyle="default" />}
          {this.state.isUserLogged ? <MainTabNavigator /> : <AppNavigator />}
        </View>
      );
    }
  }

  _loadResourcesAsync = async () => {
    return Promise.all([
      Asset.loadAsync([
        require("./assets/images/algeria_flag.png"),
        require("./assets/images/login_bg.jpg"),
        require("./assets/images/road.jpg")
      ]),
      Font.loadAsync({
        // This is the font that we are using for our tab bar
        ...Icon.Ionicons.font,
        ...Icon.EvilIcons.font,
        // We include SpaceMono because we use it in HomeScreen.js. Feel free
        // to remove this if you are not using it in your app
        "space-mono": require("./assets/fonts/SpaceMono-Regular.ttf"),
        questrial: require("./assets/fonts/Questrial-Regular.ttf"),
        Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
        PatuaOne: require("./assets/fonts/PatuaOne-Regular.ttf")
      })
    ]);
  };

  _handleLoadingError = error => {
    // In this case, you might want to report the error to your error
    // reporting service, for example Sentry
    console.warn(error);
  };

  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
  }
});

Answer 1

您不能在 render() 方法中执行此操作:

// As soon as app finishs loading and splash screen hides
// Check if user loggedIn
// Firebase.auth().onAuthStateChanged(user => {
//   if (user) {
//     this.setState({ isUserLogged: true });
//     console.log(user.providerData[0].phoneNumber);
//   } else {
//     console.log("No user logged in yet!");
//   }
// });

您通常将其添加到 componentWillMount 中。正如错误所示，您在 render 内调用 setState ，这会导致无限循环。

编辑:另外，您应该在卸载时取消订阅 firebase。这意味着您应该执行类似 this.firebaseUnsubscriber = Firebase.auth().onAuthStateChanged(user => {...}) 的操作。在 componentWillUnmount 中添加 if(this.firebaseUnsubscriber) this.firebaseUnsubscriber()