美文网首页
ReactNative封装自定义导航组件

ReactNative封装自定义导航组件

作者: 亓凡 | 来源:发表于2016-12-23 14:50 被阅读207次

    封装导航后,通过 Router 管理所有页面。

    格式:router.toXXX(params);

        import React , {Component} from 'react';
        import { StyleSheet, PropTypes, View, Navigator} from 'react-native';
        import BackPress from './BackPress';
        import Router from './Router';
    
        export default class Navigation extends Component { 
                  componentDidMount() { 
                      //安卓返回键事件监听 
                      this.backPress = new BackPress(this.navigation); 
                  }
                  componentWillUnmount() { 
                      //解除安卓返回键监听事件 
                      this.backPress.removeListener(); 
                  }  
                  /** * 路由转跳的效果,默认是FadeAndroid */
                   configureScene(route, routeStact) { 
                      //如果路由有传 切换方式,则使用 
                        if (route.configureScene) { 
                              return route.configureScene;
                        } else { 
                              return Navigator.SceneConfigs.FadeAndroid;
                        } 
                     }
                     /** * 渲染视图,传递props */ 
                    renderScene(route, navigator) {
                         //router是传递给其他组件,用于路由跳转的类 
                        this.router = this.router || new Router(navigator); 
                        //把actions直接传递给每个通过路由转跳的页面,其他参数则通过 route.params传递,它可覆盖actions 
                        this.actions = this.actions || route.params.actions;
                         if (route.component) {
                               const MyComponent = route.component; 
                               return ( 
                                    <MyComponent router={this.router} actions={this.actions} {...route.params} /> ) 
                              } 
                         }  
                         render() { 
                              const {initialRoute} = this.props; 
                              return ( 
                                    <Navigator 
                                          ref={view => this.navigation = view} 
                                          initialRoute={initialRoute} 
                                          navigationBar={
                                                <View></View>
                                          } 
                                         configureScene={this.configureScene.bind(this)} 
                                         renderScene={this.renderScene.bind(this)} 
                                     /> 
                              )
                       }
               }
               Navigator.propTypes = { 
                      initialRoute: PropTypes.object.isRequired
              }
    

    相关文章

      网友评论

          本文标题:ReactNative封装自定义导航组件

          本文链接:https://www.haomeiwen.com/subject/vcukvttx.html