react-native中NavigatorIOS的使用

关键词：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走一遍，希望大家上手轻松点吧！