[英]I have a problem when running the app on android
I have a react native app, this error start to show up after I detached from expo to pure react native, I am a beginner I don't have much experience with react-native. 我有一个React Native应用程序,当我从EXPO分离到纯React Native之后,这个错误开始出现,我是一个初学者,我对React-native没有太多的经验。
I tried removing node_modules and installing the dependencies with npm install. 我尝试删除node_modules并使用npm install安装依赖项。 I have included package.json and App.js
我已经包含package.json和App.js
package.json 的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 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"
}
});
You can't do this in render()
method: 您不能在
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!"); // } // });
You add that in componentWillMount
usually. 通常将其添加到
componentWillMount
。 As the error indicates, you are calling setState
inside render
which causes infinite loop. 如错误所示,您正在
render
中调用setState
,这会导致无限循环。
EDIT: Also you should unsubscribe from firebase on unmounting. 编辑:此外,您还应该在卸载时从Firebase退订。 That means you should do something like this
this.firebaseUnsubscriber = Firebase.auth().onAuthStateChanged(user => {...})
. 这意味着您应该执行以下操作:
this.firebaseUnsubscriber = Firebase.auth().onAuthStateChanged(user => {...})
。 In componentWillUnmount
add if(this.firebaseUnsubscriber) this.firebaseUnsubscriber()
在
componentWillUnmount
添加if(this.firebaseUnsubscriber) this.firebaseUnsubscriber()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.