未找到模块：导入多个功能组件时无法解析“./components”答案

【问题标题】：Module not found: Can't resolve './components' while import multiples function components未找到模块：导入多个功能组件时无法解析“./components”
【发布时间】：2020-06-06 21:40:56
【问题描述】：

如何从 react native 的单个文件夹中导入多个功能组件？例如 Auth 和 Home 组件。这是我的代码：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Auth from "./components/Auth"
import Home from "./components/Home"

const Stack = createStackNavigator()

export default function App() {
  return (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Auth" component={Auth} />
      <Stack.Screen name="Home" component={Home} />
    </Stack.Navigator>
  </NavigationContainer>
  );
}

这是我尝试过的：


import {Auth, Home} from "./components"

我收到此错误：Module not found: Can't resolve './components'

【问题讨论】：

标签： javascript reactjs react-native import

【解决方案1】：

为此，您必须创建一个像components/index.js 这样的新文件，然后像这样导入组件和export 它们：

import Auth from "./Auth"
import Home from "./Home"

const components = {
   Home: Home,
   Auth: Auth
}
export components

要使用主文件（app.js）中的组件，您可以通过以下方式导入组件：

import { Home, Auth } from './components'

【讨论】：