Change view in Navigator in React Native

Question

I am new to reacting to my native language.

I used NavigatorIOS, but it was too limited, so I'm trying to use Navigator. In NavigatorIOS, I can change the view by calling this.props.navigator.push() , but it does not work in Navigator, it seems to be structured differently. How to change views when using Navigator?

Answer 1

What is a minimal working navigator - it can do much more (see the end):

• You need your main “navigator” to display the Navigator component
• In the Navigator you need to specify how you should visualize the scenes for different routes (the renderScene property)
• In this renderScene method, you must render the View (scene) based on which route is rendered. A route is a simple javascript object, and by conditional scenes it can be identified by the route id parameter. For clarity and separation of concerns, I usually define each scene as a separate named component and use the name of these components as "id", although this is just a convention. It can be anything (for example, a scene number). Make sure you pass the navigator as a property for all of these views in renderScene so you can move on (see below for an example).
• If you want to switch to another view, you will actually click or replace the route with this view, and the navigator will take care to display this route as a scene and correctly animate the scene (although the animation set is quite limited) - you can control the general animation scheme, but also the animation of each scene in different ways (see white papers for some examples). Navigator saves stacks (or rather arrays) of routes, so you can freely move between those that are already on the stack (by clicking on a new, pop-up, replace, etc.).

"Navigator" View:

 render: function() { <Navigator style={styles.navigator} renderScene={(route, nav) => {return this.renderScene(route, nav)}} /> }, renderScene: function(route,nav) { switch (route.id) { case "SomeComponent": return <SomeComponent navigator={nav} /> case "SomeOtherComponent: return <SomeOtherComponent navigator={nav} /> } } 

SomeComponent:

 onSomethingClicked: function() { // this will push the new component on top of me (you can go back) this.props.navigator.push({id: "SomeOtherComponent"}); } onSomethingOtherClicked: function() { // this will replace myself with the other component (no going back) this.props.navigator.replace({id: "SomeOtherComponent"}); } 

More details here https://facebook.imtqy.com/react-native/docs/navigator.html and you can find many examples in the Samples project, which is part of native-native: https://github.com/facebook/react -native / tree / master / Examples / UIExplorer

Answer 2

I find that the Facebook examples are either simplified or complicated in demonstrating how Navigator works. Based on the @ jarek-potiuk example, I created a simple application that will switch screens back and forth.

In this example, I use: react-native: 0.36.1

index.android.js

 import React, { Component } from 'react'; import { AppRegistry, Navigator } from 'react-native'; import Apple from './app/Apple'; import Orange from './app/Orange' class wyse extends Component { render() { return ( <Navigator initialRoute={{screen: 'Apple'}} renderScene={(route, nav) => {return this.renderScene(route, nav)}} /> ) } renderScene(route,nav) { switch (route.screen) { case "Apple": return <Apple navigator={nav} /> case "Orange": return <Orange navigator={nav} /> } } } AppRegistry.registerComponent('wyse', () => wyse); 

application /Apple.js

 import React, { Component } from 'react'; import { View, Text, TouchableHighlight } from 'react-native'; export default class Apple extends Component { render() { return ( <View> <Text>Apple</Text> <TouchableHighlight onPress={this.goOrange.bind(this)}> <Text>Go to Orange</Text> </TouchableHighlight> </View> ) } goOrange() { console.log("go to orange"); this.props.navigator.push({ screen: 'Orange' }); } } 

application /Orange.js

 import React, { Component, PropTypes } from 'react'; import { View, Text, TouchableHighlight } from 'react-native'; export default class Orange extends Component { render() { return ( <View> <Text>Orange</Text> <TouchableHighlight onPress={this.goApple.bind(this)}> <Text>Go to Apple</Text> </TouchableHighlight> </View> ) } goApple() { console.log("go to apple"); this.props.navigator.push({ screen: 'Apple' }); } } 

Answer 3

I had the same problems, I could not find a good example of navigation. I wanted to be able to manage views in order to switch to a new screen, but also to be able to return to the previous screen.

I used the above answer by Andrew Wei and created a new application and then copied its code. This works well, but .push will continue to create new layers on top of each other ( Apple> orange> Apple> orange> Apple> orange , etc.). So I used .pop in the .pop file in goApple() instead of .push.

Now it works like a back button. This is what I was looking for and taught how to go to other pages.