什么是React Native中最佳的导航实践？

Question

我使用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'

有可能吗或者有其他替代方案吗？

同时，当应用程序启动时，我尝试将所有导入都放在渲染导入方法中，但它没有起作用。

- errorau

Answer 1

你可以在“pages”文件夹中创建一个索引文件来导出模块。

module.exports = { A: A, B: B}

因为懒惰（不建议这样做），你可以使用 Object.keys(pages) 来获取页面的键。

{Object.keys(Pages).map(key => {
    var Page = Pages[key];
    return <Page key={key} />;
})}

这里是一个示例：https://codesandbox.io/embed/rrrqw54n1o

- Horst