美文网首页REACT NATIVE
react-native 之 Navigator

react-native 之 Navigator

作者: redye | 来源:发表于2016-11-11 18:41 被阅读71次

    大家都知道,在 react-native 中若要使用导航的话,有两种选择:

    • Navigator
    • NavigatorIOS

    从 API 的写法上也能够看出来,NavigatorIOS 只针对 iOS 平台有限,那么在开发中,若要兼容 iOS 与 Android 两个平台的话,选择 NavigatorIOS 就不是那么明智了。当然了,在使用方面,NavigatorIOS 会更加方便和具体,在 UI 和 属性 设置方面更加接近 iOS

    在这里针对 Navigator 的使用做一些记录。

    render() {
        return (
            <Navigator initialRoute={{
                title: '30 days if RN',
                index: 0,
                display: true,
                component: MainView,
            }}
            configureScene={this.configureScene}
            renderScene={(route, navigator) => {
                return <route.component navigator={navigator} title={route.title} index={route.index} />
            }}
            navigationBar={
                <NavigationBar routeMapper={this.routeMapper} style={styles.navBar} />
            } />
        );
    }  
    

    从上面的代码中可以看出使用了 Navigator 的几大要素:

    • initialRoute: 定义启动时加载的路由, 与 initialRouteStack 二者之中必须要实现一个。
    • configureScene: 用来配置场景动画和手势。可选,默认为 Navigator.SceneConfigs.PushFromRight
    • renderScene: 必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。
    • ** navigationBar**: 导航栏,可选。

    这里主要对导航栏的实现提供两种方式:

    1. 直接在 Navigator 里配置 navigatorBar 属性:这时候要配置 routeMapper , routeMapper 是一个对象,属性名必须是 LeftButton, RightButton, Title

      class NavigationBar extends Navigator.NavigationBar {
         render() {
           let routes = this.props.navState.routeStack;
           if (routes.length) {
             let route = routes[routes.length -1];
             if (route.display === false) {
                 return null;
             }
           }
           return super.render();
         }
       } // 从这个 class 中可以看出,navigationBar 属性已经帮我们实现了一个导航栏了,如果不想要的话,可以直接返回 null。
      
       routeMapper = {
         LeftButton: (route, navigator, index, navState) => {
            if (route.index > 0) {
               return (
                   <TouchableOpacity 
                   underlayColor='transparent'
                   onPress={() => {if (index > 0) {navigator.pop()}}}>
                       <Text style={styles.navBackBtn}><Icon size={15} name='ios-arrow-back'></Icon> Back</Text>
                   </TouchableOpacity>
                );
            } else {
                 return null
            }
          },
          RightButton: (route, navigator, index, navState) => {
             return null;
          },
          Title: (route, navigator, index, navState) => {
              return (<Text style={styles.navTitle}>{route.title}</Text>);
          }
       };   
      
    2. 不提供 navigationBar,这样实际上是没有导航栏的,但是我们可以在每个页面单独配置自己的 “导航栏”。

      export default class Header extends Component {
         render() {
           let obj = this.props.initObj;
           return (
             <View style={[styles.header, styles.row, styles.center]}>
               <TouchableOpacity style={[styles.row]} onPress={() => this._pop()}>
                   <Icon />
                   <Text style={styles.fontFFF}>{obj.backName}</Text>
               </TouchableOpacity>
      
               <View style={[styles.title, styles.center]}>
                   <Text style={[styles.fontFFF, styles.titlePos]} numberOfLines={1}>{obj.title}</Text>
               </View>
           </View>
           );
         }
      
          _pop() {
             this.props.navigator.pop();
          }
       }
      

    上面的代码是将头部封装起来,然后在需要应用的页面直接使用:

     <Header navigator={this.props.navigator} initObj={{backName: '图书', title: this.state.data.title}} />
    

    参考这里

    相关文章

      网友评论

        本文标题:react-native 之 Navigator

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