react-native中NavigatorIOS的使用

作者: 肖子浩92 | 来源:发表于2015-08-28 02:12 被阅读4878次

    关键词:NavigatorIOS       COMPONENTS    

    本章我们将学习组件中的navigatorIOS,官方文档写的DEMO真的很坑爹,不便于新手学习

    我们先来看RN关于 NavigatorIOS 的API NavigatorIOS – React Native

    NavigatorIOS

    NavigatorIOS wraps UIKit navigation and allows you to add back-swipe functionality across your app.

    NOTE: This Component is not maintained by Facebook

    This component is under community responsibility. If a pure JavaScript solution fits your needs you may try theNavigatorcomponent instead.

    NavigatorIOS 是基于 UIKit的导航栏(原生调用),它允许添加back-swipes来实现跨应用程序的功能。

    注意:此组件不是由Facebook自己写的,是IOS原生的,Facebook自己用一个纯JavaScript解决方案 重新写了一个 Navigator组件  来代替NavigatorIOS( 我会写一篇文章会来讲解navigator)


    NavigatorIOS界面效果:




    Routes

    A route is an object used to describe each page in the navigator. The first route is provided to NavigatorIOS as initialRoute:

    routes是用来传递每一个nav页面的,第一个路由是由NavigatorIOS中的initialRoute提供的

    例子:

    我们使用initialRoute来传递一个component,title,还有passProps 传入的我们想要的属性(值)


    Navigator

    A navigator is an object of navigation functions that a view can call. It is passed as a prop to any component rendered by NavigatorIOS.

    导航功能视图可以调用navigator这个对象,在NavigatorIOS 中通过navigator 来出传递数据和任何组件。

    NavigatorIOS是通过  this.props.navigator的形式去传递

    例如:

    this.props.navigator.pop()  //推栈

    this.props.navigator.push() //压栈

    如果想触发NavigatorIOS这个导航栏上的效果那么就要调用 this.refs 这个方法了

    例子:


    结尾:

    官方的demo让人看了真的无法吐槽,我就简单的写一个例子!也简单的把NavigatorIOS的API走一遍,希望大家上手轻松点吧!

    相关文章

      网友评论

        本文标题:react-native中NavigatorIOS的使用

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