RN路由fkp-react-native-router



  • 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

    实例

    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}/>
            }
        })
    }
    


  • 哥们 你这个gif录制工具用的什么- - ?



  • licecap,我在苹果上用的



  • 好棒,不过我在用react-native-navigator-router 有空的话看看在下一个项目中用用这个工具



  • @hainuo 哈哈,好的,有问题私信我。不过rn最近更新很频繁,我使用的版本在0.30,0.32没有测试,最近都在忙着搞一套文档系统


登录后回复