不兼容的接收器映射要求React-Native中的错误

时间:2019-05-22 17:18:08

标签: android reactjs react-native

enter image description here在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
}

不会出现此红页错误。

0 个答案:

没有答案