创建完整的导出react-native的索引文件

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,
}

然后在组件内部,让我们说Dashboard, import { Home, Chat } from '../components'

另一种方法:

index.js

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

我也试过用curlies围绕导出,export { Home } from './home/Home'因为编译器抛出了一个错误,但它仍然没有这样工作.

我也在这个用户问题中尝试了这个方法.在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并且想要导出连接到商店的组件,请使用以下命令:

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

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

然后像这样导出:

export { HomeComponent }