無法在本機反應中導入.js文件

Question

截屏

我正在嘗試從組件文件夾中導入這三個組件，但它不允許我這樣做。 導入語句顯示為灰色並且不讀取 my.js 文件。 我根本不認為它是我的文件路徑，因為我能夠以相同的方式從資產文件夾導入圖像。 任何幫助，將不勝感激！

應用程序.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 文件名導入 Header。