什么是最佳實踐導航反應原生

Question

我開發了一個反應原生的移動應用程序。 我使用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'

它有可能或有任何替代解決方案嗎？

此外，我嘗試當應用程序啟動所有導入時放置渲染導入方法，但它不起作用

Answer 1

您可以創建一個索引文件，用於導出“pages”文件夾中的模塊。

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

對於懶惰（不推薦），您可以使用Object.keys（頁面）來獲取頁面的鍵。

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

例如： https ： //codesandbox.io/embed/rrrqw54n1o