It feels good to see a video of this component on youtube.
This is a navigation component, navigation is an important part of the app

github address

The use of direct jump is very intuitive and simple.Look at the code and make a simple comment

 //index.js 
 import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';

import PageOne from './PageOne';  //Introducing two components
import PageTwo from './PageTwo';
//Wrap the component to navigate with scene, initial means loaded by default
//Component, the key is used to register this component in the route, which is used later
//A component replaces it with its key, and a component is a component
//This component comes with a navbar. The title is the name of the navbar
export default class App extends Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
          <Scene key="pageTwo" component={PageTwo} title="PageTwo" />
        </Scene>
      </Router>
    )
  }
}

Here is the code for the two components that jump to each other

//PageOne.js First component

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
//Actions.pageTwo Navigation is based on pageTwo's key

export default class PageOne extends Component {
  render() {
    return (
      <View style={{margin: 128}}>
        <Text onPress={Actions.pageTwo}>This is PageOne!
        //In pageTwo Actions.PageOne You can jump to PageOne
</Text>
      </View>
    )
  }
}

If you want to transfer information in navigation, you can do the following

 render() {
  const goToPageTwo = () => Actions.pageTwo({text: 'Hello World!'}); 
  return (
    <View style={{margin: 128}}>
      <Text onPress={goToPageTwo}>This is PageOne!</Text>
    </View>
  )
}

//pageTwo can accept delivery via props
{this.props.text}
This is a simple introduction, and this component can also do the work of tabview, modal,sidemenu, etc. quite well.More than 2600 stars
I put up the video, English, basically okay, you can watch it on youtube, with the letters in English

react-native-router-flux Baidu Disk download address password: xnrh

react-native-router-flux Baidu Disk Download Address Password: xnrh
This is a tutorial for component authors

Reproduction: http://www.jianshu.com/p/1f81d0783862