How to do a multi-page app in react-native?

Question

The tutorial for react-native shows us how to render a single-page app, by creating a React "Class" that has a render() method named after the app, with all rendering logic.

This basically renders a page. What if I have a few rather distinct pages? Should I create this "app", and effectively have a switch statement in the render method depending upon what page the user is on, or ... is there a better/built-in way to switch between pages?

question from:https://stackoverflow.com/questions/33196334/how-to-do-a-multi-page-app-in-react-native

Answer 1

Navigator is the component i use to solve this.

1. Define your initial Route and general properties in the render method:

class MyApp extends React.Component {

render () {
    return (
        <Navigator
            initialRoute={{id: 'SplashPage', name: 'Index'}}
            renderScene={this.renderScene.bind(this)}
            configureScene={(route) => {
        if (route.sceneConfig) {
          return route.sceneConfig;
        }
        return Navigator.SceneConfigs.VerticalDownSwipeJump;
      }}/>
    );
   }
}

2. And then you need to define the other sites/views/pages where you want to go to in the renderScene method:

renderScene ( route, navigator ) {
    var routeId = route.id;
    if (routeId === 'SplashPage') {
        return (
            <SplashPage
                navigator={navigator}/>
        );
    }
    if (routeId === 'LoginPage') {
        return (
            <LoginPage
                navigator={navigator}/>
        );
    }
}
}

3. In the Splash Class you see how you route to the next page as soon as in this example 2 seconds are over with following code: (i think it would be better if there would be something like replaceWith and not just replace but never mind :P)

class SplashPage extends Component {
componentWillMount () {
    var navigator = this.props.navigator;
    setTimeout (() => {
        navigator.replace({
            id: 'LoginPage',
        });
    }, 2000);
}

render () {
    return (
        <View style={{flex: 1, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center'}}>
            <Image style={{position: 'absolute', left: 0, top: 0, width: windowSize.width, height: windowSize.height}} source={require('image!splash_screen')}></Image>
        </View>
    );
}
}

module.exports = SplashPage;