创建充满出口反应本机的索引文件

Question

是否可以在本机反应中创建一个索引文件，您可以从中引用导入而不是执行“../../folder/component”？

我尝试了几种不同的方法，包括以下几种：

组件文件夹

-> chat
  -> Chat.js
-> dashboard
  -> Dashboard.js
-> home
  -> Home.js
-> index.js

index.js

import Home from './home/Home'
import Dashboard from './dashboard/Dashboard'
import Chat from './chat/Chat'

module.exports = {
    Home,
    Dashboard,
    Chat,
}

然后在一个组件内部，比如说仪表板， import { Home, Chat } from '../components'

另一种方法：

index.js

export Home from './home/Home'
export Dashboard from './dashboard/Dashboard'
export Chat from './chat/Chat'

我还尝试用花括号包围导出，例如 export { Home } from './home/Home'，因为编译器会抛出错误，但它仍然无法以这种方式工作。

我也尝试了这个用户问题Requiring Modules in react-native中的方法

这个功能在 react-native 中可以实现吗？

Answer 1

是的，这是可能的。执行以下操作。

从组件文件中进行命名导出。

来自 Home.js

export { Home };

来自 Chat.js

export { Chat };

来自 Dashboard.js

export { Dashboard };

其中 Home、Chat 和 Dashboard 是各自文件中的组件名称。

现在在你的 index.js 中执行以下操作：

export * from './home/Home';
export * from './chat/Chat';
export * from './dashboard/Dashboard';

像这样在其他文件中使用它们：

import { Home, Chat, Dashboard } from '../components'

更新 1

如果你正在使用 redux 并且想要导出连接到 store 的组件，那么使用以下：

将连接的组件存储在 const 变量中，如下所示：

const HomeComponent = connect(mapStateToProps, mapDispatchToProps)(Home)

然后像这样导出它：

export { HomeComponent }