Блог

Я разрабатываю мобильное приложение с помощью 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'
  

это возможно или есть какое-либо альтернативное решение?

Кроме того, я пытаюсь при запуске приложения all import использовать метод render import, но это не сработало

Вы могли бы создать индексный файл для экспорта модулей в папку «страницы».

 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