在LocationInputScreen组件中使用Google Place Autosuggest时,由于此错误,我不断出现Red-Screen。我强烈猜测它与android有关。
我早些时候在渲染HomeScreen.js时遇到此错误,但是在引入了“ static navigationOptions = {header:null};”之后,它停止了运行。我在LocationInputScreen组件中尝试了这种方法,但是没有用。
我也尝试通过添加package.json “决议”:{
"core-js": "2.5.2"
} 但这没用。
LocationInputScreen.js
import React, { Component } from "react";
import { Image, Text } from "react-native";
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
class LocationInputScreen extends Component {
static navigationOptions = {
header: null
};
render() {
return (
<GooglePlacesAutocomplete
placeholder="Search"
minLength={2} // minimum length of text to search
autoFocus={false}
returnKeyType={"search"} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
keyboardAppearance={"light"} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
listViewDisplayed="auto" // true/false/undefined
fetchDetails={true}
renderDescription={row => row.description} // custom description render
onPress={(data, details = null) => {
// 'details' is provided when fetchDetails = true
console.log(data, details);
}}
getDefaultValue={() => ""}
query={{
// available options: https://developers.google.com/places/web-service/autocomplete
key: "API KEY",
language: "en" // language of the results
}}
styles={{
textInputContainer: {
width: "100%"
},
description: {
fontWeight: "bold"
},
predefinedPlacesDescription: {
color: "#1faadb"
}
}}
nearbyPlacesAPI="GooglePlacesSearch" // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
/>
);
}
}
export default LocationInputScreen;
HomeScreen.js
import React, { Component } from "react";
import { Text, View } from "react-native";
import { Button } from "native-base";
import { connect } from "react-redux";
import firebase from "react-native-firebase";
import { onSignOut } from "../Actions/AuthActions";
class HomeScreen extends Component {
static navigationOptions = {
header: null
};
componentDidMount() {
this.unsubscribe = firebase.auth().onAuthStateChanged(user => {
this.props.navigation.navigate(user ? "App" : "Auth");
});
}
componentWillUnmount() {
if (this.unsubscribe) this.unsubscribe();
}
render() {
return (
<View style={styles.container}>
<Text> HomeScreen Component</Text>
<View style={styles.buttonContainer}>
<Button dark onPress={() => this.props.onSignOut()}>
<Text style={styles.buttonText}>sign out</Text>
</Button>
</View>
</View>
);
}
}
const styles = {
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
buttonContainer: {
justifyContent: "center",
alignItems: "center"
},
buttonText: {
textAlign: "center",
color: "white"
}
};
const mapStateToProps = state => {
return {
auth: state.auth
};
};
export default connect(
mapStateToProps,
{ onSignOut }
)(HomeScreen);
Navigation \ index.js
import {
createStackNavigator,
createSwitchNavigator,
createAppContainer
} from "react-navigation";
import AuthLoading from "../Screens/AuthLoading";
import HomeScreen from "../Screens/HomeScreen";
import LoginScreen from "../Screens/LoginScreen";
import LocationInputScreen from "../Screens/LocationInputScreen";
const AuthStack = createStackNavigator({
Login: LoginScreen
});
const UserLocationStack = createStackNavigator({
UserLocation: LocationInputScreen
});
const AppStack = createStackNavigator({
Home: HomeScreen
});
const switchNavigator = createSwitchNavigator(
{
AuthLoading: AuthLoading,
App: AppStack,
Auth: AuthStack,
Location: UserLocationStack
},
{
initialRouteName: "AuthLoading"
}
);
export const Navigator = createAppContainer(switchNavigator);
package.json
{
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios"
},
"dependencies": {
"@babel/runtime": "^7.4.4",
"firebase": "^5.11.1",
"isomorphic-fetch": "^2.2.1",
"native-base": "^2.12.1",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-native": "0.57.5",
"react-native-firebase": "^5.3.1",
"react-native-gesture-handler": "^1.1.0",
"react-native-google-places-autocomplete": "^1.3.9",
"react-native-otp-inputs": "^2.0.1",
"react-native-phone-input": "^0.2.1",
"react-navigation": "^3.9.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-immutable-state-invariant": "^2.1.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-polyfill": "^6.26.0",
"babel-preset-expo": "^5.0.0",
"eslint-plugin-react-hooks": "^1.6.0",
"expo": "^32.0.6"
},
"private": true
}
不会出现此红页错误。