React-Native -- 可继承的Navigator

React-Native中Navigator的继承问题

最近使用React-Native开发程序，在使用Navigator的时候，发现Navigato无法继承。主要原因：Navigator是通过React.CreateClass创建的，与ES6支持的extends并不能很好地兼容，继承的时候不能覆盖相应的方法。

使用google在 http://www.jianshu.com/p/08d7d9e34957 中找到了解决方法。大致的思路就是在renderScene中对需要覆盖的方法进行重新的赋值。

不过，这样使用方式不太适合复用。于是重新封装成了一个可继承的Navigator。

备注：React-Native 版本为0.39.2

import React, {Component} from 'react';
import {
    Navigator
} from 'react-native';

export default class CanOverrideNavigator extends React.Component {

    render() {
return (
            <Navigator
                {...this.props}
                renderScene={(route, navigator) =>this._renderScene(route, navigator)}
            />);
    }


    _renderScene(route, navigator) {
this.overrideMethodFunc(navigator);
return this.props.renderScene(route, navigator)
    }

//设置继承方法
    overrideMethodFunc(navigator) {
if (this.overrideMethod) {
return;
        }
//保存navigator原有的函数
this._jumpBack = navigator.jumpBack;
this._jumpForward = navigator.jumpForward;
this._jumpTo = navigator.jumpTo;
this._push = navigator.push;
this._pop = navigator.pop;
this._replace = navigator.replace;
this._replaceAtIndex = navigator.replaceAtIndex;
this._replacePrevious = navigator.replacePrevious;
this._resetTo = navigator.resetTo;
this._immediatelyResetRouteStack = navigator.immediatelyResetRouteStack;
this._popToRoute = navigator.popToRoute;
this._popToTop = navigator.popToTop;
this._getCurrentRoutes = navigator.getCurrentRoutes;

//对navigator的函数进行重新的赋值
        navigator.jumpBack = ()=> {
this.jumpBack();
        };
        navigator.jumpForward = ()=> {
this.jumpForward();
        };
        navigator.jumpTo = (route)=> {
this.jumpTo(route);
        };
        navigator.push = (route)=> {
this.push(route);
        };
        navigator.pop = ()=> {
this.pop();
        };
        navigator.replace = (route)=> {
this.replace(route);
        };
        navigator.replaceAtIndex = (route, index, cb)=> {
this.replaceAtIndex(route, index, cb);
        };
        navigator.replacePrevious = (route)=> {
this.replacePrevious(route);
        };
        navigator.resetTo = (route)=> {
this.resetTo(route);
        };
        navigator.immediatelyResetRouteStack = (routeStack)=> {
this.immediatelyResetRouteStack(routeStack);
        };
        navigator.popToRoute = (route)=> {
this.popToRoute(route);
        };
        navigator.popToTop = ()=> {
this.popToTop();
        };
        navigator.getCurrentRoutes = ()=> {
this.getCurrentRoutes();
        };

this.overrideMethod = true;
    }

    jumpBack() {
this._jumpBack();
    }

    jumpForward() {
this._jumpForward();
    }

    jumpTo(route) {
this._jumpTo(route);
    }

    push(route) {
this._push(route);
    }

    pop() {
this._pop();
    }

    replace(route) {
this._replace(route);
    }

    replaceAtIndex(route, index, cb) {
this._replaceAtIndex(route, index, cb);
    }

    replacePrevious(route) {
this._replacePrevious(route);
    }

    resetTo(route) {
this._resetTo(route);
    }

    immediatelyResetRouteStack(routeStack) {
this._immediatelyResetRouteStack(routeStack);
    }

    popToRoute(route) {
this._popToRoute(route);
    }

    popToTop() {
this._popToTop();
    }

    getCurrentRoutes() {
return this._getCurrentRoutes();
    }
}

使用方式

import React, {Component} from 'react';
import CanOverrideNavigator from './CanOverrideNavigator';
import {
    View,
    Text,
    TouchableHighlight,
    Navigator
} from 'react-native';


export default class TestNavigator extends React.Component {
    render() {
return (
            <MyNavigator
                ref="navigator"
                initialRoute={{component: OneContainer}}
                configureScene={()=> {
return Navigator.SceneConfigs.PushFromRight;
                }}
                renderScene={this._renderScene.bind(this)}
            />
        );
    }

    _renderScene(route, navigator) {
        let Component = route.component;
return (
            <Component
                navigator={navigator}
                route={route}
            />
        )
    }
}

class MyNavigator extends CanOverrideNavigator {
    push(rotue) {
        console.log('before push');
super.push(rotue);
        console.log("after push");
    }

    pop() {
        console.log('before pop');
super.pop();
        console.log("after pop");
    }
}

class OneContainer extends React.Component {
    render() {
return (<TouchableHighlight
            style={{padding:20}}
            onPress={()=> {
this.props.navigator.push({component: TwoContainer})
            }}
        >
            <Text>OneContainer</Text>
        </TouchableHighlight>);
    }
}

class TwoContainer extends React.Component {
    render() {
return (<TouchableHighlight
            style={{padding:20}}
            onPress={()=> {
this.props.navigator.pop()
            }}
        >
            <Text>TwoContainer</Text>
        </TouchableHighlight>);
    }
}