fkp-react-native-router

react-native router, it from FKP-REACT-NATIVE
抽离自FKP-REACT-NATIVE框架, here

Install

npm install fkp-react-native-router -S

Demo

实例

Introduce

有三个部分 route, router, page.

1. route: define
2. router: jump to router item
3. page: receive the intent and do something…

include android back and dblclick exit 包含后退，及双击退出

Sample code

index.js

import React, { Component } from 'react';
import {route} from 'fkp-react-native-router';  // route

export default class start extends Component {
    render(){
        return (
            route.init( {
                aaa: require('./aaa').default,
                bbb: require('./bbb').default,
                ccc: require('./ccc').default,
            })
            .start('aaa', {message: 'start'})
        )
    }
}

aaa.js

import {page, router} from 'fkp-react-native-router';

let _Page;  //scope variable
let _Intent;
//....
//....
class Home extends Component {
    render() {
      return (
        <View style={styles.container}>
          <Button
              containerStyle={styles.button}
              style={{fontSize: 20, color: '#fff'}}
              styleDisabled={{color: 'red'}}
              onPress={() => {
                  _Page.router('bbb', {message: 'from aaa jump to bbb'})
              }}>
              Jump to bbb!
          </Button>
          <Button
              containerStyle={styles.button}
              style={{fontSize: 20, color: '#fff'}}
              styleDisabled={{color: 'red'}}
              onPress={() => {
                  router('ccc', {message: 'from aaa jump to ccc'})
              }}>
              Jump to ccc!
          </Button>
          // ....
        </View>
      );
    }
}

export default function start(id){
    return page.new({
        trigger: function(self, intent){
            _Page = this;
            _Intent = intent;
            return <Home data={intent}/>
        }
    })
}

bbb.js

import {page, router} from 'fkp-react-native-router';
// ....
// ....
let _Intent;

class Bbb extends Component {
    componentDidMount() {
        Toast.show(_Intent.message);
    }
    // ....
    render(){
        // ....
    }
}

export default function start(id){
    return page.new({
        trigger: function(self, intent){
            return <Bbb />
        }
    })
}

ccc.js

import {page, router} from 'fkp-react-native-router';
// ....
// ....

class Ccc extends Component {
    componentDidMount() {
        Toast.show(_Intent.message);
    }
    // ....
    render(){
        // ....         
    }
}

export default function ccc(id){
    return page.new({
        trigger: function(self, intent){             
            return <Ccc data={intent}/>
        }
    })
}