Question

我刚刚安装了节点js，并在Windows 10中进行了本机响应。当我尝试导入新屏幕（HomeScreen.js）时，我得到的响应码为500。如果删除了导入选项，它将重新开始工作。 / p>

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

您的导入语句错误。

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

如果您在根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方面好运。

Answer 3

我不确定，但是也许是因为被遗忘了；在HomeScreen.js中？

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

我注意到您在App.js的默认文件夹中拥有它

React Native返回响应错误代码500

3 个答案: