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