Question

我正在尝试从组件文件夹中导入这三个组件，但它不允许我这样做。导入语句变灰并且不读取我的 .js 文件。我根本不认为它是我的文件路径，因为我能够以相同的方式从资产文件夹导入图像。任何帮助将不胜感激！

app.js

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { Button, ImageBackground, SafeAreaView, StyleSheet, Text, TouchableWithoutFeedback, View } from "react-native";

import header from "./components/header";
import item from "./components/items";
import add from "./components/add";

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <ImageBackground source={require("./assets/cart.jpg")} style={styles.image}></ImageBackground>
      <StatusBar style="auto" />

      <Text style={styles.title}> Smart Shopper </Text>
      <Button title="Create A Shopping List" style={styles.button} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 50,
    fontFamily: "Roboto",
    fontWeight: "100",
    color: "black",
    bottom: 250,
  },
  image: {
    width: "100%",
    height: "100%",
    position: "absolute",
  },
});

header.js

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

export default function header() {
  return (
    <View style={styles.header}>
      <Text style={styles.title}>My Todos</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    height: 80,
    paddingTop: 38,
    backgroundColor: "coral",
  },
  title: {
    textAlign: "center",
    color: "#fff",
    fontSize: 20,
    fontWeight: "bold",
  },
});

Answer 1

这实际上不是错误。这显示为灰色，因为 VS 格式化程序无法识别它是反应组件，因为您在组件名称中使用了所有小写字母。你的反应组件应该在 CamelCase 中。建议大家在 react 组件中使用 Camel Case 名称。

所以首先像这样在驼峰式大小写中更改所有组件名称和文件名称：

更改文件名Header.js

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

export default function Header() {
  return (
    <View style={styles.header}>
      <Text style={styles.title}>My Todos</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    height: 80,
    paddingTop: 38,
    backgroundColor: "coral",
  },
  title: {
    textAlign: "center",
    color: "#fff",
    fontSize: 20,
    fontWeight: "bold",
  },
});

对所有组件执行此操作。

现在，像这样将它导入到你的 app.js 中：

import Header from "./components/Header";
import Item from "./components/Items";
import Add from "./components/Add";

Answer 2

如果我们要创建组件，那么我们必须创建名称以大写开头的组件。

还要记住，我们还必须导入首字母大写的组件。

尝试对代码进行一些小的更改：

在 header.js 中

export default function Header() {

在 App.js 中

import Header from "./components/header";

请记住，您必须使用您创建的文件名导入文件。所以，这里用头文件名导入Header。

无法在本机反应中导入 .js 文件

2 个答案: