基于Redux的ReactNative项目开发总结（一）

http://blog.csdn.net/u011413061/article/details/51694158

写在前面

上周把基于Redux的单页应用开发完 紧接着就开始了ReactNative的开发。真的快得不可思议，只花了一周时间，我们两个人就分工把APP也开发完了，并且同时兼容IOS操作系统和Android操作系统。内部测试了一轮，流畅性和用户体验方面也都相当给力！ 接下去几篇依次介绍项目开发中领悟的技巧和遇到的坑。

项目架构

和React开发的单页应用不同，ReactNative开发不需要依赖webpack，facebook已经提供的一套基于NodeJS的转换和运行工具，这里不多做介绍。项目的架构如下：

<code class="hljs axapta has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">|---- project     |---- android                          <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// android外壳 </span>    |---- ios                              <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// ios外壳</span>    |---- node_modules                     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 项目依赖的node模块</span>    |---- app                              <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 本项目的js代码</span>        |---- actions                      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Redux的actions</span>        |---- assets                       <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 项目使用的icon</span>        |---- components                   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 项目自定义的组件</span>        |---- containers                   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 项目的容器页面</span>        |---- mixins                       <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 全局使用的工具方法</span>        |---- modules                      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 全局使用的自定义模块  </span>        |---- reducers                     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Redux的reducers</span>        |---- configureStore.js            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Redux的store配置</span>        |---- <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">index</span>.js                     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// APP入口页面</span>    |---- <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">index</span>.ios.js                     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// android入口</span>    |---- <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">index</span>.android.js                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// ios入口</span>    |---- packge.json                      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 项目包信息</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li></ul>

对Redux不清楚的童鞋可以出门看我之前的《基于Redux的单页应用开发总结》 。其实除了路由，其他和单页应用的结构差别不大。

依赖的Node模块

ReactNative开发离不开NodeJS的支持，相比单页应用，这里依赖的模块比较少，除了Redux相关的模块，其他都是项目中用到的三方组件。

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"dependencies"</span>: {    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@remobile/react-native-toast"</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"^1.0.4"</span>,          <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 用于错误提示的小弹窗</span>    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"base-64"</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"^0.1.0"</span>,                                  <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"react"</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"^0.14.8"</span>,    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"react-native"</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"^0.25.1"</span>,    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"react-native-animatable"</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"^0.6.0"</span>,               <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 动画库</span>    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"react-native-communications"</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"^2.0.0"</span>,           <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 调用手机通讯功能</span>    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"react-native-image-picker"</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"^0.18.17"</span>,           <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 图片选择</span>    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"react-native-modalbox"</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"^1.3.3"</span>,                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 模态框</span>    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"react-native-tab-navigator"</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"^0.2.18"</span>,           <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 导航栏</span>    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"react-native-viewpager"</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"^0.2.1"</span>,                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 图片轮播切换</span>    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"react-redux"</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"^4.4.5"</span>,    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"redux"</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"^3.5.2"</span>,    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"redux-thunk"</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"^2.0.1"</span>  }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul>

错误提示

App里错误提示和网站稍有不同，网站页面宽度大，错误提示信息一般出现在输入框的后面或者悬浮在右上角。但是在App里，需要考虑用户不同的屏幕尺寸，错误信息应该放在一个相对独立且不影响其他元素显示的位置，目前主流的展现形式是这样的： 
 
即悬浮放置在页面的中底部，并且定时自动关闭。这个玩意自己写一个也不难，不过为了省事和好的兼容性，就直接使用三方的@remobile/react-native-toast了。使用方法如下：

<code class="hljs r has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">import Toast from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'@remobile/react-native-toast'</span>;// <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>Toast.showShortBottom(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'用户名或密码不正确'</span>); </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

对外的API有以下几个，顾名思义：

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">Toast.showShortTop = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(message)</span> {</span>  showToast(message, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"short"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"top"</span>);};Toast.showShortCenter = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(message)</span> {</span>  showToast(message, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"short"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"center"</span>);};Toast.showShortBottom = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(message)</span> {</span>  showToast(message, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"short"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"bottom"</span>);};Toast.showLongTop = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(message)</span> {</span>  showToast(message, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"long"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"top"</span>);};Toast.showLongCenter = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(message)</span> {</span>  showToast(message, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"long"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"center"</span>);};Toast.showLongBottom = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(message)</span> {</span>  showToast(message, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"long"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"bottom"</span>);};Toast.show = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(message)</span> {</span>  showToast(message, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"short"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"bottom"</span>);};Toast.hide = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>  RCTToast.hide();};</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li></ul>

安装和使用方法请查看 官方文档

动画库

之前花时间研究过CSS3的动画库，其实目前主流的动画类型和动画创意就那么些，感兴趣的可以 clone一下 myAnimate 这个项目。一句话，CSS3里使用的动画方案，ReactNative里也应有尽有。我这边使用的是 react-native-animatable 组件。使用方式如下：

<code class="hljs scala has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> * as Animatable from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react-native-animatable'</span>;<span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">ExampleView</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">Component</span> {</span>  render() {    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> (      <TouchableOpacity onPress={() => <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.setState({fontSize: (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.state.fontSize || <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>) + <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span> })}>          <Animatable.Text transition=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"fontSize"</span> style={{fontSize: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.state.fontSize || <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>}}>Size me up, Scotty</Animatable.Text>      </TouchableOpacity>    );  }}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

下面是官方的Demo

调用手机通讯功能

在HybridApp里实现这个功能还是挺麻烦的，需要客户端封装好接口给H5调用，但是在ReactNative里，一个组件就能搞定——react-native-communications，安装请查看官方文档

这个组件安装很简单，支持的功能有：拨号、发短信、发Email、打开网页 等 ，下面是官方一个综合的例子：

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-reserved" style="box-sizing: border-box;">import</span> React, { Component }  from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react'</span>;<span class="hljs-reserved" style="box-sizing: border-box;">import</span> {  AppRegistry,  StyleSheet,  Text,  View,  TouchableOpacity} from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react-native'</span>;<span class="hljs-reserved" style="box-sizing: border-box;">import</span> Communications from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react-native-communications'</span>;<span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">RNCommunications</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">Component</span>({</span>  render() {    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> (      <View style={styles.container}>        <TouchableOpacity onPress={<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> =></span> Communications.phonecall(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'0123456789'</span>, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>)}>          <View style={styles.holder}>            <Text style={styles.text}>Make phonecall</Text>          </View>        </TouchableOpacity>        <TouchableOpacity onPress={<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> =></span> Communications.email([<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'emailAddress1'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'emailAddress2'</span>],<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>,<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'My Subject'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'My body text'</span>)}>          <View style={styles.holder}>            <Text style={styles.text}>Send an email</Text>          </View>        </TouchableOpacity>        <TouchableOpacity onPress={<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> =></span> Communications.text(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'0123456789'</span>)}>          <View style={styles.holder}>            <Text style={styles.text}>Send a text/iMessage</Text>          </View>        </TouchableOpacity>        <TouchableOpacity onPress={<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> =></span> Communications.web(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'https://github.com/facebook/react-native'</span>)}>          <View style={styles.holder}>            <Text style={styles.text}>Open react-<span class="hljs-reserved" style="box-sizing: border-box;">native</span> repo <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">on</span> Github</Text>          </View>        </TouchableOpacity>      </View>    );  }});<span class="hljs-reserved" style="box-sizing: border-box;">const</span> styles = StyleSheet.create({  <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">container</span>: {    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">flex</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">alignItems</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">backgroundColor</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'rgb(253,253,253)'</span>,  },  <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">holder</span>: {    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">flex</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.25</span>,    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">justifyContent</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,  },  <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">text</span>: {    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">fontSize</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">32</span>,  },});AppRegistry.registerComponent<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'RNCommunications'</span>, () => RNCommunications)</span>;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li></ul>

访问手机相册

调取手机相册和上传图片是个老生常谈的问题，ReactNative里可以通过react-native-image-picker 来处理，安装请查看官方文档

拎一段代码片段：

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-reserved" style="box-sizing: border-box;">import</span> ImagePicker from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react-native-image-picker'</span> <span class="hljs-reserved" style="box-sizing: border-box;">const</span> options = {    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">title</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'选择上传图片'</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> specify <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">or</span> empty string to remove the title    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">cancelButtonTitle</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'取消'</span>,    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">takePhotoButtonTitle</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'拍照...'</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> specify <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">or</span> empty string to remove <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span> button    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">chooseFromLibraryButtonTitle</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'从库中选择...'</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> specify <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">or</span> empty string to remove <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span> button    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">customButtons</span>: {    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>    <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Choose Photo from Facebook'</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'fb'</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> [Button Text] : [String returned upon selection]    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>},    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">cameraType</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'back'</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'front'</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">or</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'back'</span>    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">mediaType</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'photo'</span>,    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">videoQuality</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'high'</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'low'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'medium'</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">or</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'high'</span>    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">maxWidth</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> photos only    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">maxHeight</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>, <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> photos only    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">allowsEditing</span>: <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">noData</span>: <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span>,}<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>... onUpload() {        ImagePicker.showImagePicker<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(options, (response) => {            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (response.didCancel) {                <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-built_in" style="box-sizing: border-box;">console</span>.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'User cancelled image picker'</span>);            }            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (response.error) {                <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-built_in" style="box-sizing: border-box;">console</span>.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ImagePicker Error: '</span>, response.error);            } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> {                <span class="hljs-reserved" style="box-sizing: border-box;">let</span> source = {uri: response.uri.replace(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'file://'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">''</span>), isLocal: <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, isStatic: <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>};                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.setState({ form: {...<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.state.form, avatar: source} })            }        })</span>    }</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li></ul>

模态框

模态框在App里使用的也比较多，比如确认模态、加载模态、输入模态等，出于良好的用户体验和兼容性考虑，我这里底层采用react-native-modalbox，然后根据不同功能进行二次加工。

ConfirmModal

很常见，不多做介绍，copy下面代码 直接可以使用

<code class="hljs scala has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> React, { Component } from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react'</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> {    Dimensions,    StyleSheet,    Text,    TouchableOpacity,    View,} from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react-native'</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> ModalBox from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react-native-modalbox'</span>;const styles = StyleSheet.create({    modal: {        borderRadius: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>,    },    modalContent: {        flex: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,        paddingLeft: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>,        paddingRight: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>,    },    h2: {        marginTop: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>,        fontSize: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>,        color: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'#555'</span>,        textAlign: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,    },    modalOption: {        flexDirection: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'row'</span>,        borderTopWidth: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,        borderTopColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'#ddd'</span>,    },    modalCancel: {        flex: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,        padding: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>,    },    modalCancelText: {        fontSize: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>,        textAlign: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,    },    modalConfirm: {        flex: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,        padding: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>,        borderLeftWidth: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,        borderLeftColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'#ddd'</span>,    },    modalConfirmText: {        fontSize: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>,        textAlign: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,    },    message: {        flex: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,        justifyContent: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,        alignItems: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,    },    messageText: {        color: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'#555'</span>,        fontSize: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>,    },});export <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">default</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">ConfirmModal</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">Component</span> {</span>    constructor(props) {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>(props);    }    open() {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.refs.modal.open()    }    close() {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.refs.modal.close()    }    render() {        let { width } = Dimensions.get(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'window'</span>);        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> (            <ModalBox                ref={<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"modal"</span>}                style={[styles.modal, {width: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.width || (width-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">60</span>), height: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.height || <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>}]}                backdropOpacity={<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.3</span>}                position={<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"center"</span>}                isOpen={<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>}>                <View style={styles.modalContent}>                    <Text style={styles.h2}>{ <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.title || <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'提示'</span> }</Text>                    <View style={styles.message}><Text style={styles.messageText}>{ <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.message }</Text></View>                </View>                <View style={styles.modalOption}>                    <TouchableOpacity style={styles.modalCancel} onPress={()=> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.refs.modal.close() }>                        <Text style={styles.modalCancelText}>取消</Text>                    </TouchableOpacity>                    <TouchableOpacity style={styles.modalConfirm} onPress={()=> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.onConfirm() }>                        <Text style={styles.modalConfirmText}>确定</Text>                    </TouchableOpacity>                </View>            </ModalBox>        )    }}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li></ul>

LoadingModal

这个也很常见，copy下面代码 直接可以使用

<code class="hljs scala has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> React, { Component } from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react'</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> {    StyleSheet,} from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react-native'</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> ModalBox from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react-native-modalbox'</span>;const styles = StyleSheet.create({    modal: {        justifyContent: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,        alignItems: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,        backgroundColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'transparent'</span>    },});export <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">default</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">LoadingModal</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">Component</span> {</span>    constructor(props) {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>(props);    }    open() {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.refs.modal.open()    }    close() {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.refs.modal.close()    }    render() {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> (            <ModalBox                style={styles.modal}                ref=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"modal"</span>                position={<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"center"</span>}                backdrop={<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>}                isOpen={<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.isOpen || <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>}                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//backdropOpacity={.3}</span>                backdropPressToClose={<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>}                animationDuration={<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>}                >            </ModalBox>        );    }}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li></ul>

PickerModal

这个特别讲解一下，PickerModal用于页面上的Picker的处理，显示效果如下：

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-reserved" style="box-sizing: border-box;">import</span> React, { Component } from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react'</span>;<span class="hljs-reserved" style="box-sizing: border-box;">import</span> {    Dimensions,    StyleSheet,    Text,    TouchableOpacity,    Picker,    View,} from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react-native'</span>;<span class="hljs-reserved" style="box-sizing: border-box;">import</span> ModalBox from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react-native-modalbox'</span><span class="hljs-reserved" style="box-sizing: border-box;">import</span> dismissKeyboard from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'../mixins/dismiss-keyboard'</span><span class="hljs-reserved" style="box-sizing: border-box;">const</span> styles = StyleSheet.create({    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">popup</span>: {    },    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">popupContent</span>: {        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">flex</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">paddingLeft</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">paddingRight</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>,    },    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">h2</span>: {        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">marginTop</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">fontSize</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">color</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'#555'</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">textAlign</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,    },    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">popupOption</span>: {        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">flexDirection</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'row'</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">borderTopWidth</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">borderTopColor</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'#ddd'</span>,    },    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">popupCancel</span>: {        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">flex</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">padding</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>,    },    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">popupCancelText</span>: {        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">fontSize</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">textAlign</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,    },    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">popupConfirm</span>: {        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">flex</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">padding</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">borderLeftWidth</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">borderLeftColor</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'#ddd'</span>,    },    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">popupConfirmText</span>: {        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">fontSize</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">textAlign</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,    },    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">message</span>: {        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">flex</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">justifyContent</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">alignItems</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,    },    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">messageText</span>: {        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">color</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'#555'</span>,        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">fontSize</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>,    },});<span class="hljs-reserved" style="box-sizing: border-box;">export</span> <span class="hljs-reserved" style="box-sizing: border-box;">default</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">PickerModal</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">Component</span> {</span>    constructor(props) {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>(props);    }    open() {        dismissKeyboard()        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.refs.modal.open()    }    close() {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.refs.modal.close()    }    _renderPickerItems(data) {        data.map<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">((item)=>{            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> [                <Picker.Item label={item[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>]} value={item[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>]} />            ]        })</span>    }    <span class="hljs-title" style="box-sizing: border-box;">render</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {        <span class="hljs-title" style="box-sizing: border-box;">let</span> { <span class="hljs-title" style="box-sizing: border-box;">width</span> } = <span class="hljs-title" style="box-sizing: border-box;">Dimensions</span>.<span class="hljs-title" style="box-sizing: border-box;">get</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'window'</span>)</span>;        <span class="hljs-title" style="box-sizing: border-box;">return</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(            <ModalBox                ref={<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"modal"</span>}                style={[styles.popup, {width: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.width || (width), height: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.height || <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>}]}                backdropOpacity={<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.3</span>}                position={<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"bottom"</span>}                swipeToClose={<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span>}                isOpen={<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span>}>                <View style={styles.popupContent}>                    <Picker {...<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props}>                        {<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.dataSource.map((item,i)=> {                            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (item.length) <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <Picker.Item key={i} label={item[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>]} value={item[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>]} />                        })}                    </Picker>                </View>            </ModalBox>        )</span>    }}</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li></ul>

补充说明一下dismissKeyboard()这个方法，该方法用于关闭页面的keyboard(键盘)，ReactNative 默认没有这种方法，需要自己编写：

<code class="hljs actionscript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;"><span class="hljs-keyword" style="box-sizing: border-box;">import</span> { TextInput } from 'react-native';</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">const</span> { State: TextInputState } = TextInput;export <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">default</span> <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">dismissKeyboard</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>    TextInputState.blurTextInput(TextInputState.currentlyFocusedField());}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

导航条

这个组件其实ReactNative提供了原生版本的，但是样式和功能上不好控制，建议自己手写一个，代码如下：

<code class="hljs scala has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> React, { Component } from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"react"</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> {    Image,    Platform,    StyleSheet,    Text,    TouchableOpacity,    View,} from <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react-native'</span>;const styles = StyleSheet.create({    leftButton: {        marginLeft: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>,    },    rightButton: {        marginRight: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>,    },    button: {        width: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">44</span>,        height: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">44</span>,        justifyContent: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,        alignItems: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,    },    nav: {        backgroundColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'#f9f9f9'</span>,        flexDirection: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'row'</span>,        alignItems: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,    },    title: {        flex: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,        height: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">44</span>,        justifyContent: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,    },    btnText: {        fontSize: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>,        color: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'#777'</span>,    },    marginForIOS: {        marginTop: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>,    },    titleText: {        fontSize: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>,        textAlign: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>,        color: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'#555'</span>    }});export <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">RightButton</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">Component</span> {</span>    render() {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> (            <TouchableOpacity                style={styles.button}                onPress={<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.onPress}>                { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.text ? <Text style={styles.btnText}>{<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.text}</Text> : <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span> }                { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.icon ? <Image source={<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.icon} style={styles.rightButton} /> : <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span> }            </TouchableOpacity>        );    }}export <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">NavigatorBar</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">Component</span> {</span>    _leftButton() {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.navigator.getCurrentRoutes().length > <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>) <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> (            <TouchableOpacity                style={styles.button}                onPress={()=> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.navigator.pop() }>                <Image source={require(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'../assets/icon-nav-left.png'</span>)} style={styles.leftButton} />            </TouchableOpacity>        )    }    _rightButton() {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.rightButton) <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> (            <RightButton {...<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.rightButton} />        )    }    render() {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> (            <View style={styles.nav}>                <View style={[styles.button, Platform.OS==<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ios'</span> ? styles.marginForIOS : <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>]}>                    {<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._leftButton()}                </View>                <View style={[styles.title, Platform.OS==<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ios'</span> ? styles.marginForIOS : <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>]}>                    <Text style={styles.titleText}>{ <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.name }</Text>                </View>                <View style={[styles.button, Platform.OS==<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ios'</span> ? styles.marginForIOS : <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>]}>                    {<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._rightButton()}                </View>            </View>        );    }}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li></ul>

然后在container里就可以使用了：

<code class="hljs handlebars has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="xml" style="box-sizing: border-box;">import { NavigatorBar } from '../components/navigator' // 没有右侧按钮 <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">NavigatorBar</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"登录"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">navigator</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">{this.props.navigator}</span> /></span> // 右侧按钮为图标  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">NavigatorBar</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"我的"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">navigator</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">{this.props.navigator}</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">rightButton</span>=</span></span><span class="hljs-expression" style="box-sizing: border-box;">{{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">onPress</span>: ()=>{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">this.props.navigator.push</span>({<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">component</span>: <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">Setting</span>})}, <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">icon</span>: <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">require</span>('<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">..</span><span class="hljs-end-block" style="box-sizing: border-box;">/..</span><span class="hljs-end-block" style="box-sizing: border-box;">/assets</span><span class="hljs-end-block" style="box-sizing: border-box;">/icon-set.png</span>')}}</span><span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"> /></span>// 右侧按钮为文字 <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">NavigatorBar</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"我的订单"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">navigator</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">{this.props.navigator}</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">rightButton</span>=</span></span><span class="hljs-expression" style="box-sizing: border-box;">{{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">text</span>: '历史 ', <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">onPress</span>: ()=> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">this.props.navigator.push</span>({<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">component</span>: <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">OrderHitory</span>}) }}</span><span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"> /></span> </span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

图片轮播

建议使用三方的react-native-viewpager组件，安装请查看 官方文档

下面是一个demo：

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-reserved" style="box-sizing: border-box;">var</span> ViewPager = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">require</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'react-native-viewpager'</span>);<ViewPager    dataSource={<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.state.dataSource}    renderPage={<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>._renderPage}    animation = {<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(animatedValue, toValue, gestureState)</span> =></span> {    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> Use the horizontal velocity <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span> the swipe gesture    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> to affect the length <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span> the transition so the faster you swipe    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> the faster the pages will transition    <span class="hljs-reserved" style="box-sizing: border-box;">var</span> velocity = Math.abs(gestureState.vx);    <span class="hljs-reserved" style="box-sizing: border-box;">var</span> baseDuration = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">300</span>;    <span class="hljs-reserved" style="box-sizing: border-box;">var</span> duration = (velocity > <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>) ? <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>/velocity * baseDuration : baseDuration;    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> Animated.timing(animatedValue,    {      <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">toValue</span>: toValue,      <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">duration</span>: duration,      <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">easing</span>: Easing.out(Easing.exp)    });  }}/></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul>