React Native returns 响应错误代码 500

Question

我刚刚在 windows 10 中安装了 node js 和 react native。当我尝试导入新屏幕 (HomeScreen.js) 时，我收到响应代码 500。如果我删除导入选项, 它又开始工作了。

App.js代码

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import HomeScreen from 'HomeScreen';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

HomeScreen.js代码

import React, { Component } from 'react'
import { Text, View } from 'react-native'

export default class HomeScreen extends Component {
    render() {
        return (
            <View>
                <Text> textInComponent </Text>
            </View>
        )
    }
}

package.json 文件

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^35.0.0",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-web": "^0.11.7",
    "react-navigation": "^4.0.10"
  },
  "devDependencies": {
    "babel-preset-expo": "^7.1.0"
  },
  "private": true
}

Answer 1

在App.js代码上，尝试写HomeScreen.js的相对路径。

你正在做：

import HomeScreen from 'HomeScreen';

试试看：

import HomeScreen from './HomeScreen'; 

// The ./ is the relative path of file.

Answer 2

我不确定，但也许是因为忘记了；在 HomeScreen.js?

export default class HomeScreen extends Component {
    render() {
        return (
            <View>
                <Text> textInComponent </Text>
            </View>
        ) << here.
    }
}

我注意到你在 App.js

中的默认设置中有它

Answer 3

你的导入语句是错误的。

如果你想导入你自己的组件，你必须在你设置的文件夹中搜索。

例如，如果您在根 lvl 中有 app.js，并且 Homescreen.js 在 Screens 文件夹中：

import HomeScreen from './screens/HomeScreen';   // no need to say ".js"

如果您想调用 screens 文件夹中的某些内容，例如组件文件夹中的另一个组件，您必须退出该文件夹并使用“../”（两个点和斜线）输入新的文件夹

import OwnComponent from "../components/OwnComponent"

旁注：如果您在名为 "index.js" 的文件夹中只有一个文件，您可以像这样导入它：

import Server from "../server"    instead of import Server from "../server/index"

祝学习 React Native 顺利。

React Native returns 响应错误代码 500

React Native returns response error code 500

react-native

react-native-android