react-native - 创建充满导出 react-native 的索引文件

Question

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

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

组件文件夹

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

索引.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'
另一种方法:

索引.js

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

我还尝试用 curl 围绕导出，例如 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 并且想要导出连接到商店的组件，请使用以下命令:

将连接的组件存储在一个常量变量中，如下所示:

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

然后像这样导出它:

export { HomeComponent }