基于Redux的ReactNative项目开发总结（一）
2016-09-11 23:35
896 查看
http://blog.csdn.net/u011413061/article/details/51694158
写在前面
上周把基于Redux的单页应用开发完 紧接着就开始了
ReactNative的开发。真的快得不可思议，只花了一周时间，我们两个人就分工把APP也开发完了，并且同时兼容
IOS操作系统和
Android操作系统。内部测试了一轮，流畅性和用户体验方面也都相当给力！
接下去几篇依次介绍项目开发中领悟的技巧和遇到的坑。
项目架构
和React开发的单页应用不同，
ReactNative开发不需要依赖
webpack，
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于Redux的ReactNative项目开发总结（二）
- 基于Redux的ReactNative项目开发总结（二）
- 基于Redux的ReactNative项目开发总结（一）
- 基于Redux的ReactNative项目开发总结（一）
- 基于React Native + redux 开发的客户端(适配IOS和Android),可查看保存妹纸,收藏分享文章等
- 基于React+Router+Redux+Sagas+fetch+ant Design +less + es6+mockjs的项目过程总结
- 基于 react-native+redux 开发的高仿 V2EX 客户端
- React-Native开发总结-redux层面上的问题
- react-native总结之项目开发环境创建
- react-native总结之项目开发环境创建
- 【React Native开发】React Native移植原生Android项目(4)
- iOS开发——React Native入门总结
- 实例讲解基于 React+Redux 的前端开发流程
- react-native项目之样式总结
- RN（react native）入坑指南-06,项目开发结构(代码分层组织)
- 【腾讯Bugly干货分享】React Native项目实战总结
- [React项目总结] 基于 webpack 搭建前端工程基础篇
- React-Native的项目总结
- Anyoffice -HTML5大赛 悦心（基于H5开发安卓音乐app）-项目总结
- 基于Redux架构的单页应用开发总结（二）