CODEWITHSUNDEEP
react-native
GreenAsJade
GreenAsJade

Reputation: 14685

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

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?

Upvotes: 45

Views: 45026

Answers (4)

Alt Eisen
Alt Eisen

Reputation: 648

According to the official document, besides react navigation, native navigation and react native navigation provide cross-platform multi-page solution. And NavigatorIOS offers an iOS only component.

Another relevant project can be found from React Native Router.

Upvotes: 0

BigPun86
BigPun86

Reputation: 2686

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;

Upvotes: 26

Kenny Meyer
Kenny Meyer

Reputation: 8027

I found @Mr Brown's answer to be a little confusing, so I basically rewrote it with code - so here's a basic example using Navigator compatible with Android and iOS:

var PageOne = React.createClass({
  _handlePress() {
    this.props.navigator.push({id: 2,});
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'green'}]}>
       </View>
    )
  },
});

var PageTwo = React.createClass({
  _handlePress() {
    this.props.navigator.pop();
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'purple'}]}>
       </View>
    )
  },
});

var SampleApp = React.createClass({
  _renderScene(route, navigator) {
    if (route.id === 1) {
      return <PageOne navigator={navigator} />
    } else if (route.id === 2) {
      return <PageTwo navigator={navigator} />
    }
  },

  render() {
    return (
      <Navigator
        initialRoute={{id: 1, }}
        renderScene={this._renderScene} />
    );
  }
});

The code should be pretty self-explanatory. Let me know if you don't understand something.

Upvotes: 10

KChen
KChen

Reputation: 1918

Use Navigator or Modal to enter a new page.

Upvotes: 3

Related Questions