what's the best practice navigation react native

Question

I develop a mobile application with react native. I use react-native-router-flux and my App.js like this.

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;

Can I put all import a file like this example 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';

and I again call this file in App.js

import AllPagesImportfrom './AllPagesImport'

it's possible or has any alternative solution?

Also, I try when application start all import put a render import method but it's didn't work

score 2 · Answer 1 · answered Apr 03 '19 at 10:23

You might create an index file for exporting modules in "pages" folder.

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

For being lazy(not recommended), you may make use of Object.keys(pages) to get the pages' key.

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

example here: https://codesandbox.io/embed/rrrqw54n1o

what's the best practice navigation react native

1 Answers1