wushenghua/vczero.github.io
1
0
Fork 0
mirror of https://github.com/wu736139669/vczero.github.io.git synced 2026-08-05 06:23:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

update react-native 4-2

Browse Source
This commit is contained in:
lh_wang
2015-09-27 20:49:07 +08:00
parent 4768df575b
commit a4e837218f
1 changed files with 329 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react_native/第4篇react-native布局实战（二）.html
+328 -183
View File
@@ -1,134 +1,284 @@
<!doctype html>
<html>
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
margin: 0;
padding: 0;
}
<title>第4篇React-Native布局实战（二）</title>
<style type="text/css">
body {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #737373;
font-family: Helvetica, arial, sans-serif;
font-size: 14px;
line-height: 1.6;
padding-top: 10px;
padding-bottom: 10px;
background-color: white;
margin: 10px 13px 10px 13px;
}
table {
margin: 10px 0 15px 0;
border-collapse: collapse;
}
td,th {
border: 1px solid #ddd;
padding: 3px 10px;
}
th {
padding: 5px 10px;
}
padding: 30px; }
body > *:first-child {
margin-top: 0 !important; }
body > *:last-child {
margin-bottom: 0 !important; }
a {
color: #0069d6;
}
a:hover {
color: #0050a3;
text-decoration: none;
}
a img {
border: none;
}
p {
margin-bottom: 9px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #404040;
line-height: 36px;
}
color: #4183C4; }
a.absent {
color: #cc0000; }
a.anchor {
display: block;
padding-left: 30px;
margin-left: -30px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 0; }
h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
cursor: text;
position: relative; }
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA09pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoMTMuMCAyMDEyMDMwNS5tLjQxNSAyMDEyLzAzLzA1OjIxOjAwOjAwKSAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM2NjlDQjI4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM2NjlDQjM4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzY2OUNCMDg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzY2OUNCMTg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsQhXeAAAABfSURBVHjaYvz//z8DJYCRUgMYQAbAMBQIAvEqkBQWXI6sHqwHiwG70TTBxGaiWwjCTGgOUgJiF1J8wMRAIUA34B4Q76HUBelAfJYSA0CuMIEaRP8wGIkGMA54bgQIMACAmkXJi0hKJQAAAABJRU5ErkJggg==) no-repeat 10px center;
text-decoration: none; }
h1 tt, h1 code {
font-size: inherit; }
h2 tt, h2 code {
font-size: inherit; }
h3 tt, h3 code {
font-size: inherit; }
h4 tt, h4 code {
font-size: inherit; }
h5 tt, h5 code {
font-size: inherit; }
h6 tt, h6 code {
font-size: inherit; }
h1 {
margin-bottom: 18px;
font-size: 30px;
}
font-size: 28px;
color: black; }
h2 {
font-size: 24px;
}
border-bottom: 1px solid #cccccc;
color: black; }
h3 {
font-size: 18px;
}
font-size: 18px; }
h4 {
font-size: 16px;
}
font-size: 16px; }
h5 {
font-size: 14px;
}
font-size: 14px; }
h6 {
font-size: 13px;
}
color: #777777;
font-size: 14px; }
p, blockquote, ul, ol, dl, li, table, pre {
margin: 15px 0; }
hr {
margin: 0 0 19px;
border: 0;
border-bottom: 1px solid #ccc;
}
blockquote {
padding: 13px 13px 21px 15px;
margin-bottom: 18px;
font-family:georgia,serif;
font-style: italic;
}
blockquote:before {
content:"\201C";
font-size:40px;
margin-left:-10px;
font-family:georgia,serif;
color:#eee;
}
blockquote p {
font-size: 14px;
font-weight: 300;
line-height: 18px;
margin-bottom: 0;
font-style: italic;
}
code, pre {
font-family: Monaco, Andale Mono, Courier New, monospace;
}
code {
background-color: #fee9cc;
color: rgba(0, 0, 0, 0.75);
padding: 1px 3px;
font-size: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre {
display: block;
padding: 14px;
margin: 0 0 18px;
line-height: 16px;
font-size: 11px;
border: 1px solid #d9d9d9;
white-space: pre-wrap;
word-wrap: break-word;
}
pre code {
background-color: #fff;
color:#737373;
font-size: 11px;
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;
border: 0 none;
color: #cccccc;
height: 4px;
padding: 0;
}
body > h2:first-child {
margin-top: 0;
padding-top: 0; }
body > h1:first-child {
margin-top: 0;
padding-top: 0; }
body > h1:first-child + h2 {
margin-top: 0;
padding-top: 0; }
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
margin-top: 0;
padding-top: 0; }
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0; }
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
margin-top: 0; }
li p.first {
display: inline-block; }
li {
margin: 0; }
ul, ol {
padding-left: 30px; }
ul :first-child, ol :first-child {
margin-top: 0; }
dl {
padding: 0; }
dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px; }
dl dt:first-child {
padding: 0; }
dl dt > :first-child {
margin-top: 0; }
dl dt > :last-child {
margin-bottom: 0; }
dl dd {
margin: 0 0 15px;
padding: 0 15px; }
dl dd > :first-child {
margin-top: 0; }
dl dd > :last-child {
margin-bottom: 0; }
blockquote {
border-left: 4px solid #dddddd;
padding: 0 15px;
color: #777777; }
blockquote > :first-child {
margin-top: 0; }
blockquote > :last-child {
margin-bottom: 0; }
table {
padding: 0;border-collapse: collapse; }
table tr {
border-top: 1px solid #cccccc;
background-color: white;
margin: 0;
padding: 0; }
table tr:nth-child(2n) {
background-color: #f8f8f8; }
table tr th {
font-weight: bold;
border: 1px solid #cccccc;
margin: 0;
padding: 6px 13px; }
table tr td {
border: 1px solid #cccccc;
margin: 0;
padding: 6px 13px; }
table tr th :first-child, table tr td :first-child {
margin-top: 0; }
table tr th :last-child, table tr td :last-child {
margin-bottom: 0; }
img {
max-width: 100%; }
span.frame {
display: block;
overflow: hidden; }
span.frame > span {
border: 1px solid #dddddd;
display: block;
float: left;
overflow: hidden;
margin: 13px 0 0;
padding: 7px;
width: auto; }
span.frame span img {
display: block;
float: left; }
span.frame span span {
clear: both;
color: #333333;
display: block;
padding: 5px 0 0; }
span.align-center {
display: block;
overflow: hidden;
clear: both; }
span.align-center > span {
display: block;
overflow: hidden;
margin: 13px auto 0;
text-align: center; }
span.align-center span img {
margin: 0 auto;
text-align: center; }
span.align-right {
display: block;
overflow: hidden;
clear: both; }
span.align-right > span {
display: block;
overflow: hidden;
margin: 13px 0 0;
text-align: right; }
span.align-right span img {
margin: 0;
text-align: right; }
span.float-left {
display: block;
margin-right: 13px;
overflow: hidden;
float: left; }
span.float-left span {
margin: 13px 0 0; }
span.float-right {
display: block;
margin-left: 13px;
overflow: hidden;
float: right; }
span.float-right > span {
display: block;
overflow: hidden;
margin: 13px auto 0;
text-align: right; }
code, tt {
margin: 0 2px;
padding: 0 5px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px; }
pre code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent; }
.highlight pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px; }
pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px; }
pre code, pre tt {
background-color: transparent;
border: none; }
sup {
font-size: 0.83em;
vertical-align: super;
@@ -140,40 +290,35 @@ sup {
@media screen and (min-width: 914px) {
body {
width: 854px;
margin:10px auto;
margin:0 auto;
}
}
@media print {
body,code,pre code,h1,h2,h3,h4,h5,h6 {
color: black;
}
table, pre {
page-break-inside: avoid;
}
pre {
word-wrap: break-word;
}
}
</style>
<title>React-Native入门指南</title>
</head>
<body>
<h1>React-Native入门指南</h1>
<h1 id="toc_0">React-Native入门指南</h1>
<h2>第四篇React-Native布局实战(二)</h2>
<h2 id="toc_1">第四篇React-Native布局实战(二)</h2>
<pre><code>在不断深入的过程中，发现React-Native布局和样式的坑还有很多，他没有像浏览器那样灵活和有规律可循，其中的规律需要我自己踩坑的时候发现。比如：不存在zIndex,后面的元素覆盖前面的元素；内层元素覆盖外层元素等等,borderRadius的设置，需要考虑到内层元素的位置等等。
</code></pre>
<pre><code>在不断深入的过程中，发现React-Native布局和样式的坑还有很多，他没有像浏览器那样灵活和有规律可循，其中的规律需要我自己踩坑的时候发现。比如：不存在zIndex,后面的元素覆盖前面的元素；内层元素覆盖外层元素等等,borderRadius的设置，需要考虑到内层元素的位置等等。</code></pre>
<h3>一、实战的内容</h3>
<h3 id="toc_2">一、实战的内容</h3>
<pre><code>这里选用携程的App首页作为栗子，随不是严格的9宫格(比9宫格稍微难点...)，但是可以很好的让我们练习flexbox.最后需要完成的结果如下：
</code></pre>
<pre><code>这里选用携程的App首页作为栗子，随不是严格的9宫格(比9宫格稍微难点...)，但是可以很好的让我们练习flexbox.最后需要完成的结果如下：</code></pre>
<p><img src="pic/4_0_1.png" alt="'首页'" /></p>
<p><img src="pic/4_0_1.png" alt="&#39;首页&#39;"></p>
<h3>二、分解内容</h3>
<h3 id="toc_3">二、分解内容</h3>
<pre><code>整个页面我们可以分为几个部分，大致如下：
</code></pre>
<pre><code>整个页面我们可以分为几个部分，大致如下：</code></pre>
<ul>
<li>头部</li>
@@ -182,14 +327,13 @@ sup {
<li>底部活动</li>
</ul>
<h3>三、头部导航栏</h3>
<h3 id="toc_4">三、头部导航栏</h3>
<pre><code>因为，组件还没有讲，这里只是做一个简单的介绍。在React-Native中实现头部导航栏很简单，只要使用NavigatorIOS组件即可。现在开工。
1、我们在index.ios.js中添加如下代码；同时创建文件夹pagaes和pages下创建Index.js
var React = require('react-native');
var Index = require('./pages/Index');
var React = require(&#39;react-native&#39;);
var Index = require(&#39;./pages/Index&#39;);
var {
NavigatorIOS,
@@ -203,7 +347,7 @@ var NV = React.createClass({
&lt;NavigatorIOS
style={styles.container}
initialRoute={{
title: '首页',
title: &#39;首页&#39;,
component: Index,
}}
/&gt;
@@ -218,38 +362,40 @@ var styles = StyleSheet.create({
});
AppRegistry.registerComponent('HelloWorld', () =&gt; NV);
AppRegistry.registerComponent(&#39;HelloWorld&#39;, () =&gt; NV);
分析代码：
（1）require：引入外部模块，就像，引入我们自己创建的/pages/Index.js一样。
（2）引入定义NavigatorIOS、AppRegistry、StyleSheet组件和类。
（3）在render中调用NavigatorIOS组件，initialRoute是初始化路由，title是当前页面的头部标题；component是当前路由下显示的组件；
（4）注意：这里NavigatorIOS的style需要设置大小，比如这里设置是flex：1，否则就不能显示内容主体；
（5）最后我们需要注册当前应用：AppRegistry.registerComponent('HelloWorld', () =&gt; NV);
（5）最后我们需要注册当前应用：AppRegistry.registerComponent(&#39;HelloWorld&#39;, () =&gt; NV);
2、创建Index.js文件，文件的内容如下, module.exports就暴露了Index模块。
</code></pre>
2、创建Index.js文件，文件的内容如下, module.exports就暴露了Index模块。</code></pre>
<p><img src="pic/4_0_3.png" alt="'Index'" />
<p><img src="pic/4_0_3.png" alt="&#39;Index&#39;">
效果如下图：
<img src="pic/4_0_2.png" alt="'头部'" /></p>
<img src="pic/4_0_2.png" alt="&#39;头部&#39;"></p>
<h3>四、图片轮播</h3>
<h3 id="toc_5">四、图片轮播</h3>
<pre><code>这里图片轮播使用的是第三方组件react-native-swiper,当然React-Native是支持transform可以直接实现一套。我们启动npm命令行，在项目的根目录使用如下命令安装模块。
$ npm react-native-swiper --save
$ npm install react-native-swiper --save
$ npm i react-timer-mixin --save</code></pre>
安装完成后，我们需要完成轮播功能。因为可以到github看看swiper暴露的接口和参数。github地址是：https://github.com/leecade/react-native-swiper
<p>(2)需要关闭React packager命令行和模拟器，在xcode中重启项目</p>
<pre><code>安装完成后，我们需要完成轮播功能。因为可以到github看看swiper暴露的接口和参数。github地址是：https://github.com/leecade/react-native-swiper
（1）引入swiper,前面也提到了require.
var Swiper = require('react-native-swiper');
var Swiper = require(&#39;react-native-swiper&#39;);
（2）使用swiper,将轮播图封装成单独的组件
var sliderImgs = [
'http://images3.c-ctrip.com/SBU/apph5/201505/16/app_home_ad16_640_128.png',
'http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png',
'http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg'
&#39;http://images3.c-ctrip.com/SBU/apph5/201505/16/app_home_ad16_640_128.png&#39;,
&#39;http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png&#39;,
&#39;http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg&#39;
];
var Slider = React.createClass({
render: function(){
@@ -262,20 +408,19 @@ var Slider = React.createClass({
);
}
});
(3)这样我们可以直接在render的时候直接用：&lt;Slider/&gt;
</code></pre>
(3)这样我们可以直接在render的时候直接用：&lt;Slider/&gt;</code></pre>
<h3>五、完成第一个9宫格布局，后面复制拷贝</h3>
<h3 id="toc_6">五、完成第一个9宫格布局，后面复制拷贝</h3>
<pre><code>其实4个九宫格都是一样，这个其实可以封装成组件，这里采用拷贝的形式，开发一个，其他3个就ok的，不会偷懒的工程师，不是好工程师［偷笑］。分析下布局：
（1）其实首先是3个列在一行的布局，那么外层组件是需要flexDirection: 'row'，各占据宽度的1/3,即各自flex:1；
（1）其实首先是3个列在一行的布局，那么外层组件是需要flexDirection: &#39;row&#39;，各占据宽度的1/3,即各自flex:1；
（2）每个列内又分两行， 需要每个行都是flex:1,各占据高度的一半；
（3）第一列是文字图片组合，其余都是文字组合；
（4）所有行内元素都是水平、垂直居中；
（5）这里使用了个TouchableHighlight组件，是为了出发onPress事件，类似于click或者touch事件。
&lt;View style={[styles.sbu_red, styles.sbu_view]}&gt;
&lt;TouchableHighlight underlayColor={'#FA6778'} style={{flex:1}}&gt;
&lt;TouchableHighlight underlayColor={&#39;#FA6778&#39;} style={{flex:1}}&gt;
&lt;View style={[styles.sbu_flex, styles.sbu_borderRight]}&gt;
&lt;View style={[styles.sub_con_flex, styles.sub_text]}&gt;
&lt;Text style={[styles.font16]}&gt;酒店&lt;/Text&gt;
@@ -301,16 +446,15 @@ var Slider = React.createClass({
&lt;Text style={[styles.font16]}&gt;客栈.公寓&lt;/Text&gt;
&lt;/View&gt;
&lt;/View&gt;
&lt;/View&gt;
</code></pre>
&lt;/View&gt; </code></pre>
<h3>六、样式类</h3>
<h3 id="toc_7">六、样式类</h3>
<pre><code>说完了布局的原理，这里需要贴上样式仅供参考：
var styles = StyleSheet.create({
//container
container:{
backgroundColor:'#F2F2F2',
backgroundColor:&#39;#F2F2F2&#39;,
flex:1,
},
//slider
@@ -329,33 +473,33 @@ sbu_view:{
borderWidth:1,
borderRadius:5,
marginBottom:10,
flexDirection:'row',
flexDirection:&#39;row&#39;,
},
sbu_red:{
backgroundColor: '#FA6778',
borderColor:'#FA6778',
backgroundColor: &#39;#FA6778&#39;,
borderColor:&#39;#FA6778&#39;,
marginTop:-70,
},
sbu_blue:{
backgroundColor: '#3D98FF',
borderColor:'#3D98FF',
backgroundColor: &#39;#3D98FF&#39;,
borderColor:&#39;#3D98FF&#39;,
},
sbu_green:{
backgroundColor: '#5EBE00',
borderColor:'#5EBE00',
backgroundColor: &#39;#5EBE00&#39;,
borderColor:&#39;#5EBE00&#39;,
},
sbu_yellow:{
backgroundColor: '#FC9720',
borderColor:'#FC9720',
backgroundColor: &#39;#FC9720&#39;,
borderColor:&#39;#FC9720&#39;,
},
sbu_flex:{
flex:1,
},
sbu_borderRight:{
borderColor:'#fff',
borderColor:&#39;#fff&#39;,
borderRightWidth: 0.5,
},
sbu_icon_img:{
@@ -365,33 +509,33 @@ sbu_icon_img:{
},
sub_con_flex:{
flex:1,
justifyContent: 'center',
alignItems: 'center',
justifyContent: &#39;center&#39;,
alignItems: &#39;center&#39;,
},
sub_text:{
justifyContent:'center',
justifyContent:&#39;center&#39;,
},
font16:{
fontSize:17,
color:'#FFF',
fontWeight:'900',
color:&#39;#FFF&#39;,
fontWeight:&#39;900&#39;,
},
sbu_borderBottom:{
borderBottomWidth:0.5,
borderBottomColor:'#fff',
borderBottomColor:&#39;#fff&#39;,
},
img_view:{
height:62,
marginLeft:5,
marginRight:5,
flexDirection: 'row',
flexDirection: &#39;row&#39;,
marginBottom:20,
backgroundColor:'#fff',
backgroundColor:&#39;#fff&#39;,
},
img_flex:{
flex:1,
borderWidth:1,
borderColor:'#ccc',
borderColor:&#39;#ccc&#39;,
},
img_wh: {
height:59,
@@ -400,14 +544,15 @@ img_wh: {
}
});
着重说下resizeMode:Image.resizeMode.contain。在React-Native中图片的大小是不会根据给定一个宽度或者高度而自适应大小的，因此我们需要让图片根据宽度或者高度来自适应，那么可以使用resizeMode:Image.resizeMode.contain。facebook提示错误信息的样式表中也没有提及，文档中也没有提及。所以后续还有不少的坑需要大家去一起探索。
</code></pre>
着重说下resizeMode:Image.resizeMode.contain。在React-Native中图片的大小是不会根据给定一个宽度或者高度而自适应大小的，因此我们需要让图片根据宽度或者高度来自适应，那么可以使用resizeMode:Image.resizeMode.contain。facebook提示错误信息的样式表中也没有提及，文档中也没有提及。所以后续还有不少的坑需要大家去一起探索。</code></pre>
<h3>七、Index.js整个代码，仅供参考</h3>
<h3 id="toc_8">七、Index.js整个代码，仅供参考</h3>
<pre><code>实例代码中会涉及ScrollView组件，主要是为了适应小屏的机器，可以滚动视图。
</code></pre>
<pre><code>实例代码中会涉及ScrollView组件，主要是为了适应小屏的机器，可以滚动视图。</code></pre>
<p><a href="https://github.com/vczero/react-native-lession/tree/master/code/%E7%AC%AC4%E7%AF%87%E5%B8%83%E5%B1%80%E5%AE%9E%E6%88%98%EF%BC%88%E4%BA%8C%EF%BC%89%E4%BB%A3%E7%A0%81">代码链接：github</a></p>
</body>
</html>