Трудно переходить с одного экрана на другой в React Native

Question

Каждый раз, когда я пытаюсь запустить следующий код, я получаю сообщение об ошибке ниже:

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получил: не определено. Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

Проверьте метод рендеринга приложения Profile.

. . js

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";

import Home from "./src/Home";
import Profile from "./src/Profile";

const Navigator = createStackNavigator({
  Home: { screen: Home },
  Profile: { screen: Profile }
});

const App = createAppContainer(Navigator);

export default App;

Дом. js

import React from "react";
import {
  StyleSheet,
  View,
  ImageBackground,
  Text,
  TouchableOpacity
} from "react-native";

export default class Home extends React.Component {
  static navigationOptions = {
    title: "Home"
  };

  render() {
    const { navigate } = this.props.navigation;

    return (
      <View style={styles.container}>
        <ImageBackground
          style={styles.backgroundImage}
          source={require("./ln.jpg")}
        >
          <Text style={styles.mainScreen}>Welcome to Lunch Nomads</Text>
          <TouchableOpacity
            onPress={() => navigate("Profile", { name: "Jane" })}
            style={styles.buttonIn}
          >
            <Text style={styles.buttonText}>Log In</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => alert("Hello, world!")}
            style={styles.buttonUp}
          >
            <Text style={styles.buttonText}>Sign Up</Text>
          </TouchableOpacity>
          <Text style={styles.p}>Made in Detroit, available Worldwide</Text>
        </ImageBackground>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,

    alignItems: "center",

    justifyContent: "center"
  },

  mainScreen: {
    color: "black",

    fontSize: 37,

    fontWeight: "bold",

    alignItems: "center",

    textAlign: "center"
  },

  p: {
    color: "black",

    fontSize: 15,

    fontWeight: "bold",

    alignItems: "center",

    textAlign: "center",

    marginTop: 70
  },

  buttonUp: {
    paddingTop: 10,

    backgroundColor: "blue",

    width: 240,

    height: 60,

    borderRadius: 5,

    alignItems: "center",

    marginTop: 20
  },

  buttonIn: {
    marginTop: 400,

    paddingTop: 10,

    backgroundColor: "green",

    width: 240,

    height: 60,

    borderRadius: 5,

    alignItems: "center"
  },

  buttonText: {
    fontSize: 20,

    color: "black",

    paddingTop: 5
  },

  backgroundImage: {
    flex: 1,

    width: "100%",

    height: "100%",

    justifyContent: "center",

    alignItems: "center"
  },

  instructions: {
    color: "#888",

    fontSize: 18,

    marginHorizontal: 15,

    marginBottom: 10
  }
});

Профиль. js

import React from "react";
import { MapView } from "expo";
import { StyleSheet, View, Text, Button } from "react-native";

export default class Profile extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam("name")
    };
  };

  constructor(props) {
    super(props);

    this.state = {
      region: {
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.922,
        longitudeDelta: 0.0421
      }
    };
  }

  render() {
    const { navigate, state } = this.props.navigation;

    return (
      <View style={styles.container}>
        <MapView
          initialRegion={this.state.region}
          showUserLocation={true}
          showsCompass={true}
          rotateEnabled={false}
        />
        <Text>Hello {state.params.name}</Text>
        <Button title="Go to home screen" onPress={() => navigate("Home")} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
});

Answer 1

эта ошибка происходит из-за MapView в экспо. Чтобы исправить это go на Profile.js и изменить

import { MapView } from "expo";

на

import MapView from 'react-native-maps';

Надеюсь, это поможет вам. Не стесняйтесь сомнений.