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@H_403_13@ React,{Component} from 'react'@H_403_13@;
import@H_403_13@ {
    Navigator
} from 'react-native'@H_403_13@;

export@H_403_13@ default@H_403_13@ class@H_403_13@ CanOverrideNavigator@H_403_13@ extends@H_403_13@ React@H_403_13@.Component@H_403_13@ {@H_403_13@

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


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

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

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

        this@H_403_13@.overrideMethod = true@H_403_13@;
    }

    jumpBack() {
        this@H_403_13@._jumpBack();
    }

    jumpForward() {
        this@H_403_13@._jumpForward();
    }

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

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

    pop() {
        this@H_403_13@._pop();
    }

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

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

    replacePrevIoUs(route) {
        this@H_403_13@._replacePrevIoUs(route);
    }

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

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

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

    popToTop() {
        this@H_403_13@._popToTop();
    }

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

使用方式

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


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

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

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

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

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

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