React-Native -- 可继承的Navigator

前端之家收集整理的这篇文章主要介绍了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

  1. import React,{Component} from 'react';
  2. import {
  3. Navigator
  4. } from 'react-native';
  5.  
  6. export default class CanOverrideNavigator extends React.Component {
  7.  
  8. render() {
  9. return (
  10. <Navigator
  11. {...this.props}
  12. renderScene={(route,navigator) =>this._renderScene(route,navigator)}
  13. />);
  14. }
  15.  
  16.  
  17. _renderScene(route,navigator) {
  18. this.overrideMethodFunc(navigator);
  19. return this.props.renderScene(route,navigator)
  20. }
  21.  
  22. //设置继承方法
  23. overrideMethodFunc(navigator) {
  24. if (this.overrideMethod) {
  25. return;
  26. }
  27. //保存navigator原有的函数
  28. this._jumpBack = navigator.jumpBack;
  29. this._jumpForward = navigator.jumpForward;
  30. this._jumpTo = navigator.jumpTo;
  31. this._push = navigator.push;
  32. this._pop = navigator.pop;
  33. this._replace = navigator.replace;
  34. this._replaceAtIndex = navigator.replaceAtIndex;
  35. this._replacePrevIoUs = navigator.replacePrevIoUs;
  36. this._resetTo = navigator.resetTo;
  37. this._immediatelyResetRouteStack = navigator.immediatelyResetRouteStack;
  38. this._popToRoute = navigator.popToRoute;
  39. this._popToTop = navigator.popToTop;
  40. this._getCurrentRoutes = navigator.getCurrentRoutes;
  41.  
  42. //对navigator的函数进行重新的赋值
  43. navigator.jumpBack = ()=> {
  44. this.jumpBack();
  45. };
  46. navigator.jumpForward = ()=> {
  47. this.jumpForward();
  48. };
  49. navigator.jumpTo = (route)=> {
  50. this.jumpTo(route);
  51. };
  52. navigator.push = (route)=> {
  53. this.push(route);
  54. };
  55. navigator.pop = ()=> {
  56. this.pop();
  57. };
  58. navigator.replace = (route)=> {
  59. this.replace(route);
  60. };
  61. navigator.replaceAtIndex = (route,index,cb)=> {
  62. this.replaceAtIndex(route,cb);
  63. };
  64. navigator.replacePrevIoUs = (route)=> {
  65. this.replacePrevIoUs(route);
  66. };
  67. navigator.resetTo = (route)=> {
  68. this.resetTo(route);
  69. };
  70. navigator.immediatelyResetRouteStack = (routeStack)=> {
  71. this.immediatelyResetRouteStack(routeStack);
  72. };
  73. navigator.popToRoute = (route)=> {
  74. this.popToRoute(route);
  75. };
  76. navigator.popToTop = ()=> {
  77. this.popToTop();
  78. };
  79. navigator.getCurrentRoutes = ()=> {
  80. this.getCurrentRoutes();
  81. };
  82.  
  83. this.overrideMethod = true;
  84. }
  85.  
  86. jumpBack() {
  87. this._jumpBack();
  88. }
  89.  
  90. jumpForward() {
  91. this._jumpForward();
  92. }
  93.  
  94. jumpTo(route) {
  95. this._jumpTo(route);
  96. }
  97.  
  98. push(route) {
  99. this._push(route);
  100. }
  101.  
  102. pop() {
  103. this._pop();
  104. }
  105.  
  106. replace(route) {
  107. this._replace(route);
  108. }
  109.  
  110. replaceAtIndex(route,cb) {
  111. this._replaceAtIndex(route,cb);
  112. }
  113.  
  114. replacePrevIoUs(route) {
  115. this._replacePrevIoUs(route);
  116. }
  117.  
  118. resetTo(route) {
  119. this._resetTo(route);
  120. }
  121.  
  122. immediatelyResetRouteStack(routeStack) {
  123. this._immediatelyResetRouteStack(routeStack);
  124. }
  125.  
  126. popToRoute(route) {
  127. this._popToRoute(route);
  128. }
  129.  
  130. popToTop() {
  131. this._popToTop();
  132. }
  133.  
  134. getCurrentRoutes() {
  135. return this._getCurrentRoutes();
  136. }
  137. }

使用方式

  1. import React,{Component} from 'react';
  2. import CanOverrideNavigator from './CanOverrideNavigator';
  3. import {
  4. View,Text,TouchableHighlight,Navigator
  5. } from 'react-native';
  6.  
  7.  
  8. export default class TestNavigator extends React.Component {
  9. render() {
  10. return (
  11. <MyNavigator
  12. ref="navigator"
  13. initialRoute={{component: OneContainer}}
  14. configureScene={()=> {
  15. return Navigator.SceneConfigs.PushFromRight;
  16. }}
  17. renderScene={this._renderScene.bind(this)}
  18. />
  19. );
  20. }
  21.  
  22. _renderScene(route,navigator) {
  23. let Component = route.component;
  24. return (
  25. <Component
  26. navigator={navigator}
  27. route={route}
  28. />
  29. )
  30. }
  31. }
  32.  
  33. class MyNavigator extends CanOverrideNavigator {
  34. push(rotue) {
  35. console.log('before push');
  36. super.push(rotue);
  37. console.log("after push");
  38. }
  39.  
  40. pop() {
  41. console.log('before pop');
  42. super.pop();
  43. console.log("after pop");
  44. }
  45. }
  46.  
  47. class OneContainer extends React.Component {
  48. render() {
  49. return (<TouchableHighlight
  50. style={{padding:20}}
  51. onPress={()=> {
  52. this.props.navigator.push({component: TwoContainer})
  53. }}
  54. >
  55. <Text>OneContainer</Text>
  56. </TouchableHighlight>);
  57. }
  58. }
  59.  
  60. class TwoContainer extends React.Component {
  61. render() {
  62. return (<TouchableHighlight
  63. style={{padding:20}}
  64. onPress={()=> {
  65. this.props.navigator.pop()
  66. }}
  67. >
  68. <Text>TwoContainer</Text>
  69. </TouchableHighlight>);
  70. }
  71. }

猜你在找的React相关文章