我使用 React Native 开发了一个移动应用程序。我使用 react-native-router-flux
和我的 App.js
是这样的。
import React, { Component } from "react";
import { Router, Scene } from "react-native-router-flux";
import A from './pages/A';
import B from './pages/B';
import C from './pages/C';
import D from './pages/D';
import E from './pages/E';
import F from './pages/F';
//... and if i add new page here add new import
class App extends Component {
render(){
return (
<Router>
<Scene key="root" >
<Scene key="AA" component={A} ... Other properties />
<Scene key="BB" component={B} ... Other properties />
<Scene key="CC" component={C} ... Other properties />
<Scene key="DD" component={D} ... Other properties />
... other scenes items here
</Scene>
</Router>
);
}
}
export default App;
我可以把所有导入文件都像这个例子AllPagesImport.js
import B from './pages/B';
import C from './pages/C';
import D from './pages/D';
import E from './pages/E';
import F from './pages/F';
然后我再次在 App.js
中调用这个文件
import AllPagesImportfrom './AllPagesImport'
有可能或有任何替代解决方案吗?
此外,我尝试在应用程序启动时将所有导入放入渲染导入方法,但它没有用
最佳答案
您可以在“pages”文件夹中创建一个用于导出模块的索引文件。
module.exports = { A: A, B: B}
为了懒惰(不推荐),你可以使用 Object.keys(pages) 来获取页面的键。
{Object.keys(Pages).map(key => {
var Page = Pages[key];
return <Page key={key} />;
})}
关于javascript - 什么是最佳实践导航 react native ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55489033/