在 React Native 中很难从一个屏幕导航到另一个屏幕

Question

每次我尝试运行以下代码时，都会收到以下错误：

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

查看Profile的渲染方法。

App.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;

Home.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
  }
});

Profile.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 在 expo 中发生的。为了解决这个问题，请转到您的 Profile.js 并更改

import { MapView } from "expo";

到

import MapView from 'react-native-maps';

希望这对您有所帮助。如有疑问，请随意。