CODEWITHSUNDEEP
react-native
Steve Ng
Steve Ng

Reputation: 1189

How do you use navigator to go to another component in react-native?

I have the below code

InterfaceA is another react component with a text view.

Currently when I click on "Go another component", it keeps going back to it's own view.

When i press "Go another component" it doesn't go to interfaceA view. Does anyone know how do I use navigator.push to go to interfaceA? 

var ToolbarAndroidExample = React.createClass({

  _goA: function(navigator) {

    navigator.push({
      component: InterfaceA
    })
  },

  _goPrevious: function(navigator) {
    navigator.pop();
  },

  _renderScene: function(route, navigator) {

    return (
      <View>
          <TouchableHighlight onPress={() => this._goA(navigator) }>
            <Text> Go another component </Text>
          </TouchableHighlight>

          <TouchableHighlight onPress={() => this._goPrevious() }>
            <Text> Go previous</Text>
          </TouchableHighlight>
      </View>
    )
  },

  render: function() {
    return (

      <Navigator
        initialRoute={{ 
          message: "First Scene. Press me to go to the next scene.", index: 1
        }}
        renderScene={this._renderScene} />


    );
  },
});

Upvotes: 0

Views: 430

Answers (1)

KChen
KChen

Reputation: 1918

Check the example of React Native:

https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/Navigator

navigator.push({
  message: 'second page',
  index: 2
})

and change the return value in _renderScene function according to the route.

Upvotes: 1

Related Questions