Блог

У меня есть приложение react native, эта ошибка начинает появляться после того, как я перешел с expo на чистый react native, я новичок, у меня нет большого опыта работы с react-native.

Я попытался удалить node_modules и установить зависимости с помощью npm install. Я включил package.json и App.js

Скриншот приложения

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 amp;amp;
      !this.props.skipLoadingScreen amp;amp;
      !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" amp;amp; <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"
  }
});
  

Вы не можете сделать это в 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 . Как указывает ошибка, вы вызываете setState inside render , что вызывает бесконечный цикл.

Редактировать: Также вам следует отказаться от подписки на firebase при размонтировании. Это означает, что вы должны сделать что-то вроде этого this.firebaseUnsubscriber = Firebase.auth().onAuthStateChanged(user => {...}) . В componentWillUnmount add if(this.firebaseUnsubscriber) this.firebaseUnsubscriber()