add react-page 3
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 28 KiB |
@@ -1,7 +1,7 @@
|
||||
#React-Native入门指南
|
||||
##第一篇环境配置 & Hello World
|
||||
###一、前言
|
||||
最近手头的工作繁多,有研究性的项目和系统研发,正好遇到同事离职,接手了框架的UI组件,不仅需要维护和填坑,还需要开发新的功能组件。因为身在H5-Hybird的框架部门,最近团队开始尝试使用React-Native来做些东西。之前也有过开发iOS App的冲动,学了点Object-c,这次正好借此机会进入App开发,以弥补自己在Native-App上的经验不足。
|
||||
最近手头的工作繁多,有研究性的项目和系统研发,又遇到同事离职,接手了框架的UI组件,不仅需要维护和填坑,还需要开发新的功能组件。因为身在H5-Hybird的框架部门,最近团队开始尝试使用React-Native来做些东西。之前也有过开发iOS App的冲动,学了点Object-c,这次正好借此机会进入App开发,以弥补自己在Native-App上的经验不足。
|
||||
|
||||
###二、环境配置
|
||||
(1)需要一台Mac(OSX),这个是前提,建议还是入手一本啦。
|
||||
|
||||
@@ -0,0 +1,264 @@
|
||||
<!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;
|
||||
}
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #737373;
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 18px;
|
||||
font-size: 30px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 13px;
|
||||
}
|
||||
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;
|
||||
padding: 0;
|
||||
}
|
||||
sup {
|
||||
font-size: 0.83em;
|
||||
vertical-align: super;
|
||||
line-height: 0;
|
||||
}
|
||||
* {
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
@media screen and (min-width: 914px) {
|
||||
body {
|
||||
width: 854px;
|
||||
margin:10px auto;
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
body,code,pre code,h1,h2,h3,h4,h5,h6 {
|
||||
color: black;
|
||||
}
|
||||
table, pre {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<title>React-Native入门指南</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>React-Native入门指南</h1>
|
||||
|
||||
<h2>第2篇代码结构</h2>
|
||||
|
||||
<h3>一、了解index.ios.js</h3>
|
||||
|
||||
<pre><code>大家都清楚,React-Native就是在开发效率和用户体验间做的一种权衡。React-native是使用JS开发,开发效率高、发布能力强,不仅拥有hybrid的开发效率,同时拥有native app相媲美的用户体验。目前天猫也在这块开始试水。
|
||||
用编辑器打开index.ios.js文件,分析代码结构:
|
||||
1、第一句:var React = require('react-native');有Node.js开发经验的同学都清楚,require可以引入其他模块。如果没有node.js开发经验的同学,可以脑补下java的import和c++的#include。
|
||||
2、第二句代码,批量定义组件:
|
||||
var {
|
||||
AppRegistry,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} = React;
|
||||
其实,这只是一个语法糖而已,比如AppRegistry我们可以这样定义:var AppRegistry = React.AppRegistry;
|
||||
3、构建Heollo World入口类。React提供了React.createClass的方法创建一个类。里面的render方法就是渲染视图用的。return返回的是视图的模板代码。其实这是JSX的模板语法,可以提前学习下。
|
||||
4、相对于web开发,我们需要提供视图的样式,那么StyleSheet.create就是干这件事的,只是用JS的自面量表达了css样式。
|
||||
5、如何引入css样式?其实在render方法返回的视图模板里已经体现出来了,即style={styles.container}.其中style是视图的一个属性,styles是我们定义的样式表,container是样式表中的一个样式。
|
||||
6、注册应用入口,这个一定不能少,否则模拟器会提示报错:
|
||||
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
|
||||
</code></pre>
|
||||
|
||||
<h3>二、其实你还需要看点这方面的知识</h3>
|
||||
|
||||
<pre><code>对于React-Native开发,仅仅有基础前端开发的知识是不够的,你还需要了解和掌握的有:
|
||||
</code></pre>
|
||||
|
||||
<ul>
|
||||
<li>Node.js基础</li>
|
||||
<li>JSX语法基础</li>
|
||||
<li>Flexbox布局</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>三、目前需要关注的文件</h3>
|
||||
|
||||
<pre><code>1、目前阶段有几个文件时需要注意下的:
|
||||
(1)在xcode项目代码中AppDelegate.m会标识入口文件,例如:
|
||||
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
|
||||
如果是网上下载别人的源码,注意此处的ip和端口是否有被修改。
|
||||
(2)闪屏界面在哪修改?在xcode项目中找到LaunchScreen.xib文件,点击,你会看到界面,这个就是启动界面,你手动添加组件或者修改文本即可,最好了解下xcode的使用。
|
||||
(3)文本编辑器打开index.ios.js文件,是js代码的入口文件,所有的代码编写从这开始,可以定义自己的模块和引入第三方模块。
|
||||
</code></pre>
|
||||
|
||||
<h3>四、修改文件index.ios.js</h3>
|
||||
|
||||
<pre><code>1、修改启动界面,如下图
|
||||
</code></pre>
|
||||
|
||||
<p><img src="2_1.png" alt="启动界面" /></p>
|
||||
|
||||
<pre><code>2、添加图片和修改样式.我们在第一篇的demo基础上修改。去掉第二个和第三个<Text>,增加我们需要的图片,因为图片更具表达力,就像最近的图片社交应用很火一样。
|
||||
(1)添加Image组件,将代码修改成如下即可:
|
||||
var {
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
Image,
|
||||
} = React;
|
||||
(2)将render返回中的模版增加Image组件视图,具体如下:
|
||||
render: function() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.welcome}>
|
||||
React-Native入门学习
|
||||
</Text>
|
||||
<Image style={styles.pic} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}>
|
||||
</Image>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
其中,Image标签的source的第一个大括号是模板,第二个大括号是js对象,js对象里面有个key是uri,表示图片的地址。
|
||||
(3)修改图片视图的样式,删除多余的样式,增加pic样式:
|
||||
var styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5FCFF',
|
||||
},
|
||||
welcome: {
|
||||
fontSize: 20,
|
||||
textAlign: 'center',
|
||||
margin: 10,
|
||||
color: 'red',
|
||||
},
|
||||
pic: {
|
||||
width:100,
|
||||
height:100,
|
||||
}
|
||||
});
|
||||
(4)可以cmd + Q 停止模拟器,然后再cmd + R开启模拟器,你会发现启动界面和首页都你想要的样子:
|
||||
</code></pre>
|
||||
|
||||
<p> <img src="2_2.png" alt="首页" /></p>
|
||||
|
||||
<h3>如果终端被关闭了怎么办</h3>
|
||||
|
||||
<pre><code> 不用担心,其实只要你切到项目的根目录,命令行输入npm start即可,这样即可开发终端监听。实际上也是node.js的监听服务开启而已。如下图表示成功。
|
||||
</code></pre>
|
||||
|
||||
<p> <img src="2_3.png" alt="npm start" /></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
#React-Native入门指南
|
||||
##第2篇代码结构
|
||||
###一、了解index.ios.js
|
||||
大家都清楚,React-Native就是在开发效率和用户体验间做的一种权衡。React-native是使用JS开发,开发效率高、发布能力强,不仅拥有hybrid的开发效率,同时拥有native app相媲美的用户体验。目前天猫也在这块开始试水。
|
||||
用编辑器打开index.ios.js文件,分析代码结构:
|
||||
1、第一句:var React = require('react-native');有Node.js开发经验的同学都清楚,require可以引入其他模块。如果没有node.js开发经验的同学,可以脑补下java的import和c++的#include。
|
||||
2、第二句代码,批量定义组件:
|
||||
var {
|
||||
AppRegistry,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} = React;
|
||||
其实,这只是一个语法糖而已,比如AppRegistry我们可以这样定义:var AppRegistry = React.AppRegistry;
|
||||
3、构建Heollo World入口类。React提供了React.createClass的方法创建一个类。里面的render方法就是渲染视图用的。return返回的是视图的模板代码。其实这是JSX的模板语法,可以提前学习下。
|
||||
4、相对于web开发,我们需要提供视图的样式,那么StyleSheet.create就是干这件事的,只是用JS的自面量表达了css样式。
|
||||
5、如何引入css样式?其实在render方法返回的视图模板里已经体现出来了,即style={styles.container}.其中style是视图的一个属性,styles是我们定义的样式表,container是样式表中的一个样式。
|
||||
6、注册应用入口,这个一定不能少,否则模拟器会提示报错:
|
||||
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
|
||||
|
||||
|
||||
###二、其实你还需要看点这方面的知识
|
||||
对于React-Native开发,仅仅有基础前端开发的知识是不够的,你还需要了解和掌握的有:
|
||||
* Node.js基础
|
||||
* JSX语法基础
|
||||
* Flexbox布局
|
||||
|
||||
###三、目前需要关注的文件
|
||||
1、目前阶段有几个文件时需要注意下的:
|
||||
(1)在xcode项目代码中AppDelegate.m会标识入口文件,例如:
|
||||
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
|
||||
如果是网上下载别人的源码,注意此处的ip和端口是否有被修改。
|
||||
(2)闪屏界面在哪修改?在xcode项目中找到LaunchScreen.xib文件,点击,你会看到界面,这个就是启动界面,你手动添加组件或者修改文本即可,最好了解下xcode的使用。
|
||||
(3)文本编辑器打开index.ios.js文件,是js代码的入口文件,所有的代码编写从这开始,可以定义自己的模块和引入第三方模块。
|
||||
|
||||
###四、修改文件index.ios.js
|
||||
1、修改启动界面,如下图
|
||||

|
||||
|
||||
2、添加图片和修改样式.我们在第一篇的demo基础上修改。去掉第二个和第三个<Text>,增加我们需要的图片,因为图片更具表达力,就像最近的图片社交应用很火一样。
|
||||
(1)添加Image组件,将代码修改成如下即可:
|
||||
var {
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
Image,
|
||||
} = React;
|
||||
(2)将render返回中的模版增加Image组件视图,具体如下:
|
||||
render: function() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.welcome}>
|
||||
React-Native入门学习
|
||||
</Text>
|
||||
<Image style={styles.pic} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}>
|
||||
</Image>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
其中,Image标签的source的第一个大括号是模板,第二个大括号是js对象,js对象里面有个key是uri,表示图片的地址。
|
||||
(3)修改图片视图的样式,删除多余的样式,增加pic样式:
|
||||
var styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5FCFF',
|
||||
},
|
||||
welcome: {
|
||||
fontSize: 20,
|
||||
textAlign: 'center',
|
||||
margin: 10,
|
||||
color: 'red',
|
||||
},
|
||||
pic: {
|
||||
width:100,
|
||||
height:100,
|
||||
}
|
||||
});
|
||||
(4)可以cmd + Q 停止模拟器,然后再cmd + R开启模拟器,你会发现启动界面和首页都你想要的样子:
|
||||

|
||||
|
||||
###如果终端被关闭了怎么办
|
||||
不用担心,其实只要你切到项目的根目录,命令行输入npm start即可,这样即可开发终端监听。实际上也是node.js的监听服务开启而已。如下图表示成功。
|
||||

|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,350 @@
|
||||
<!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;
|
||||
}
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #737373;
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 18px;
|
||||
font-size: 30px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 13px;
|
||||
}
|
||||
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;
|
||||
padding: 0;
|
||||
}
|
||||
sup {
|
||||
font-size: 0.83em;
|
||||
vertical-align: super;
|
||||
line-height: 0;
|
||||
}
|
||||
* {
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
@media screen and (min-width: 914px) {
|
||||
body {
|
||||
width: 854px;
|
||||
margin:10px auto;
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
body,code,pre code,h1,h2,h3,h4,h5,h6 {
|
||||
color: black;
|
||||
}
|
||||
table, pre {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<title>React-Native入门指南</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>React-Native入门指南</h1>
|
||||
|
||||
<h2>第3篇CSS和UI布局</h2>
|
||||
|
||||
<h3>一、了解React-Native组件</h3>
|
||||
|
||||
<pre><code>作为开发者都知道,UI组件对于一个应用的重要性。也许,在一款应用中,你还没有完整的,有体系的构建UI组件,但是你一定或多或少有种想把组件抽出来的冲动,就像有些冲动是人类的本能一样....这是作为一个开发者的本能。那么组件的复用和统一话是十分必要的。常见的组件有:日历、下来列表(常在应用中表现为下拉刷新)、导航栏、头部、底部、选项卡等等。React-Native就提供了一套iOS原生的组件,这样就不用HTML5去模拟组件了。React-Native使用css来构建页面布局,使用Native iOS Components给我们提供强大的组件功能。目前已有组件如下图:
|
||||
</code></pre>
|
||||
|
||||
<p><img src="3_1.png" alt="组件列表" /></p>
|
||||
|
||||
<h3>二、使用CSS样式 & Flexbox布局</h3>
|
||||
|
||||
<pre><code>第一篇,已经知道了如何构建工程。这里同样创建一个HelloWorld工程。默认启动界面如下图:
|
||||
</code></pre>
|
||||
|
||||
<p><img src="3_2.png" alt="默认界面" /></p>
|
||||
|
||||
<pre><code>1、基本样式
|
||||
这里使用View和Text组件作为演示对象,首先,修改index.ios.js里面的代码,这里只需要关注StyleSheet和render里面的模板。修改后的代码如下:
|
||||
/**
|
||||
* Sample React Native App
|
||||
* https://github.com/facebook/react-native
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('react-native');
|
||||
var {
|
||||
AppRegistry,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} = React;
|
||||
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<View>
|
||||
<View></View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
});
|
||||
|
||||
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
|
||||
这时候,你cmd + R刷新模拟器应该看到是空白的界面。现在,是展现css魅力的时候了。React-native使用的css 表达是一个JS自面量对象,并且严格区分该对象属性的类型,所以要遵循对象的写法,而不能使用以前css的写法,这个需要自己熟悉了。
|
||||
(1)增加一个带边框的矩形,红色边框
|
||||
直接在组件上添加样式是这样的:style={{height:40, borderWidth: 1, borderColor: 'red'}}style是组件的一个自有属性,第一个{}JS执行环境或者说是模板,第二个{}只是css样式对象的括号而已(慢慢体会,不难理解)。这样修改后的代码如下:
|
||||
render: function() {
|
||||
return (
|
||||
<View>
|
||||
<View style={{height:40, borderWidth: 1, borderColor: 'red'}}>
|
||||
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
cmd + R刷新模拟器,结果如下:
|
||||
</code></pre>
|
||||
|
||||
<p> <img src="3_3.png" alt="基本css" /></p>
|
||||
|
||||
<pre><code> (2)如何知道该组件支持哪些样式呢?
|
||||
上面的已经很简单了,作为web开发者用脚趾头都能闭眼写出来。如果我们需要知道该组件又哪些样式,又不用查手册,一个最为简单的方法是,在样式表里写错一个属性,比如我写一个没有的属性“border”。但是该属性必须写到样式的创建中去,而不能写为内联样式。写成内联样式,你是看不到报错提示的。我门改写成样式表创建类里面:
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.style_1}>
|
||||
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
style_1:{
|
||||
border: '1px solid red',
|
||||
height:40,
|
||||
borderWidth: 1,
|
||||
borderColor: 'red',
|
||||
}
|
||||
});
|
||||
这个时候你就能齐刷刷的看到样式表的报错和提示有哪些样式了,如下图所示:
|
||||
</code></pre>
|
||||
|
||||
<p> <img src="3_4.png" alt="样式列表" /></p>
|
||||
|
||||
<pre><code> (3)独立样式类
|
||||
其实上面已经展示了独立样式类了,那么样式类创建很简单,我们只需要使用React.StyleSheet来创建类。其实创建的类就是一个js对象而已。那么在组件上引用是这样的<View style={{对象名称.对象属性}}></View>,就跟上面(2)的代码一样。
|
||||
|
||||
2、说说Flexbox布局
|
||||
其实,这样的css样式,作为web开发这一用就会,那么说说布局的事儿。除去margin, padding, position等大家熟悉的web布局的话,最为重要的就是flexbox,目前支持的属性如下,有6个:
|
||||
</code></pre>
|
||||
|
||||
<p> <img src="3_5.png" alt="flexbox" /></p>
|
||||
|
||||
<pre><code> (1)先说flex属性,上一段代码
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<View style={styles.style_0}>
|
||||
<View style={styles.style_1}></View>
|
||||
<View style={styles.style_1}></View>
|
||||
<View style={{flex:10}}></View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
style_0:{
|
||||
flex:1,
|
||||
},
|
||||
style_1:{
|
||||
flex: 5,
|
||||
height:40,
|
||||
borderWidth: 1,
|
||||
borderColor: 'red',
|
||||
}
|
||||
});
|
||||
当一个(元素)组件,定义了flex属性时,表示改元素是可伸缩的。当然flex的属性值是大于0的时候才伸缩,其他小于和等于0的时候不伸缩,例如:flex:0, flex:-1等。上面的代码,最外层的view是可伸缩的,因为没有兄弟节点和他抢占空间。里层是3个view,可以看到三个view的flex属性加起来是5+5+10=20,所以第一个view和第二个view分别占1/4伸缩空间, 最后一个view占据1/2空间,具体如下图:
|
||||
</code></pre>
|
||||
|
||||
<p><img src="3_6.png" alt="flex" /></p>
|
||||
|
||||
<pre><code> (2) flexDirection
|
||||
flexDirection在React-Native中只有两个属性,一个是row(横向伸缩)和column(纵向伸缩)。具体的想过可见如下代码:
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<View style={styles.style_0}>
|
||||
<View style={styles.style_1}>
|
||||
<Text style={{marginTop:40, fontSize:25}}>1/4高</Text>
|
||||
<Text style={{marginTop:40, fontSize:25}}>1/4高</Text>
|
||||
</View>
|
||||
<View style={[styles.style_1, {flexDirection: 'column'}]}>
|
||||
<Text style={{marginTop:40, fontSize:25}}>1/4高</Text>
|
||||
<Text style={{marginTop:40, fontSize:25}}>1/4高</Text>
|
||||
</View>
|
||||
<View style={{flex:10, borderWidth: 1, borderColor: 'red',}}>
|
||||
<Text style={{marginTop:40, fontSize:25}}>1/2高</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
style_0:{
|
||||
flex:1,
|
||||
},
|
||||
style_1:{
|
||||
flex: 5,
|
||||
flexDirection: 'row',
|
||||
height:40,
|
||||
borderWidth: 1,
|
||||
borderColor: 'red',
|
||||
}
|
||||
});
|
||||
具体的效果如下:
|
||||
</code></pre>
|
||||
|
||||
<p><img src="3_7.png" alt="flex" /></p>
|
||||
|
||||
<pre><code> (3)alignSelf:对齐方式
|
||||
alignSelf的对齐方式主要有四种:flex-start、 flex-end、 center、 auto、 stretch。看看代码,应该就很清楚了:
|
||||
</code></pre>
|
||||
|
||||
<p><img src="3_8.png" alt="flex" /></p>
|
||||
|
||||
<pre><code> 效果如下图
|
||||
</code></pre>
|
||||
|
||||
<p><img src="3_9.png" alt="flex" /></p>
|
||||
|
||||
<pre><code> (4)水平垂直居中
|
||||
alignItems是alignSelf的变种,跟alignSelf的功能类似,可用于水平居中;justifyContent用于垂直居中,属性较多,可以了解下。
|
||||
</code></pre>
|
||||
|
||||
<p><img src="3_10.png" alt="flex" /></p>
|
||||
|
||||
<pre><code> 效果如下图
|
||||
</code></pre>
|
||||
|
||||
<p><img src="3_11.png" alt="flex" /></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,166 @@
|
||||
#React-Native入门指南
|
||||
|
||||
##第3篇CSS和UI布局
|
||||
|
||||
###一、了解React-Native组件
|
||||
作为开发者都知道,UI组件对于一个应用的重要性。也许,在一款应用中,你还没有完整的,有体系的构建UI组件,但是你一定或多或少有种想把组件抽出来的冲动,就像有些冲动是人类的本能一样....这是作为一个开发者的本能。那么组件的复用和统一话是十分必要的。常见的组件有:日历、下来列表(常在应用中表现为下拉刷新)、导航栏、头部、底部、选项卡等等。React-Native就提供了一套iOS原生的组件,这样就不用HTML5去模拟组件了。React-Native使用css来构建页面布局,使用Native iOS Components给我们提供强大的组件功能。目前已有组件如下图:
|
||||

|
||||
|
||||
###二、使用CSS样式 & Flexbox布局
|
||||
第一篇,已经知道了如何构建工程。这里同样创建一个HelloWorld工程。默认启动界面如下图:
|
||||

|
||||
|
||||
1、基本样式
|
||||
这里使用View和Text组件作为演示对象,首先,修改index.ios.js里面的代码,这里只需要关注StyleSheet和render里面的模板。修改后的代码如下:
|
||||
/**
|
||||
* Sample React Native App
|
||||
* https://github.com/facebook/react-native
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('react-native');
|
||||
var {
|
||||
AppRegistry,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} = React;
|
||||
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<View>
|
||||
<View></View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
});
|
||||
|
||||
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
|
||||
这时候,你cmd + R刷新模拟器应该看到是空白的界面。现在,是展现css魅力的时候了。React-native使用的css 表达是一个JS自面量对象,并且严格区分该对象属性的类型,所以要遵循对象的写法,而不能使用以前css的写法,这个需要自己熟悉了。
|
||||
(1)增加一个带边框的矩形,红色边框
|
||||
直接在组件上添加样式是这样的:style={{height:40, borderWidth: 1, borderColor: 'red'}}style是组件的一个自有属性,第一个{}JS执行环境或者说是模板,第二个{}只是css样式对象的括号而已(慢慢体会,不难理解)。这样修改后的代码如下:
|
||||
render: function() {
|
||||
return (
|
||||
<View>
|
||||
<View style={{height:40, borderWidth: 1, borderColor: 'red'}}>
|
||||
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
cmd + R刷新模拟器,结果如下:
|
||||

|
||||
|
||||
(2)如何知道该组件支持哪些样式呢?
|
||||
上面的已经很简单了,作为web开发者用脚趾头都能闭眼写出来。如果我们需要知道该组件又哪些样式,又不用查手册,一个最为简单的方法是,在样式表里写错一个属性,比如我写一个没有的属性“border”。但是该属性必须写到样式的创建中去,而不能写为内联样式。写成内联样式,你是看不到报错提示的。我门改写成样式表创建类里面:
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.style_1}>
|
||||
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
style_1:{
|
||||
border: '1px solid red',
|
||||
height:40,
|
||||
borderWidth: 1,
|
||||
borderColor: 'red',
|
||||
}
|
||||
});
|
||||
这个时候你就能齐刷刷的看到样式表的报错和提示有哪些样式了,如下图所示:
|
||||

|
||||
|
||||
(3)独立样式类
|
||||
其实上面已经展示了独立样式类了,那么样式类创建很简单,我们只需要使用React.StyleSheet来创建类。其实创建的类就是一个js对象而已。那么在组件上引用是这样的<View style={{对象名称.对象属性}}></View>,就跟上面(2)的代码一样。
|
||||
|
||||
2、说说Flexbox布局
|
||||
其实,这样的css样式,作为web开发这一用就会,那么说说布局的事儿。除去margin, padding, position等大家熟悉的web布局的话,最为重要的就是flexbox,目前支持的属性如下,有6个:
|
||||

|
||||
|
||||
(1)先说flex属性,上一段代码
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<View style={styles.style_0}>
|
||||
<View style={styles.style_1}></View>
|
||||
<View style={styles.style_1}></View>
|
||||
<View style={{flex:10}}></View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
style_0:{
|
||||
flex:1,
|
||||
},
|
||||
style_1:{
|
||||
flex: 5,
|
||||
height:40,
|
||||
borderWidth: 1,
|
||||
borderColor: 'red',
|
||||
}
|
||||
});
|
||||
当一个(元素)组件,定义了flex属性时,表示改元素是可伸缩的。当然flex的属性值是大于0的时候才伸缩,其他小于和等于0的时候不伸缩,例如:flex:0, flex:-1等。上面的代码,最外层的view是可伸缩的,因为没有兄弟节点和他抢占空间。里层是3个view,可以看到三个view的flex属性加起来是5+5+10=20,所以第一个view和第二个view分别占1/4伸缩空间, 最后一个view占据1/2空间,具体如下图:
|
||||

|
||||
|
||||
(2) flexDirection
|
||||
flexDirection在React-Native中只有两个属性,一个是row(横向伸缩)和column(纵向伸缩)。具体的想过可见如下代码:
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<View style={styles.style_0}>
|
||||
<View style={styles.style_1}>
|
||||
<Text style={{marginTop:40, fontSize:25}}>1/4高</Text>
|
||||
<Text style={{marginTop:40, fontSize:25}}>1/4高</Text>
|
||||
</View>
|
||||
<View style={[styles.style_1, {flexDirection: 'column'}]}>
|
||||
<Text style={{marginTop:40, fontSize:25}}>1/4高</Text>
|
||||
<Text style={{marginTop:40, fontSize:25}}>1/4高</Text>
|
||||
</View>
|
||||
<View style={{flex:10, borderWidth: 1, borderColor: 'red',}}>
|
||||
<Text style={{marginTop:40, fontSize:25}}>1/2高</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
style_0:{
|
||||
flex:1,
|
||||
},
|
||||
style_1:{
|
||||
flex: 5,
|
||||
flexDirection: 'row',
|
||||
height:40,
|
||||
borderWidth: 1,
|
||||
borderColor: 'red',
|
||||
}
|
||||
});
|
||||
具体的效果如下:
|
||||

|
||||
|
||||
(3)alignSelf:对齐方式
|
||||
alignSelf的对齐方式主要有四种:flex-start、 flex-end、 center、 auto、 stretch。看看代码,应该就很清楚了:
|
||||

|
||||
|
||||
效果如下图
|
||||

|
||||
|
||||
(4)水平垂直居中
|
||||
alignItems是alignSelf的变种,跟alignSelf的功能类似,可用于水平居中;justifyContent用于垂直居中,属性较多,可以了解下。
|
||||

|
||||
|
||||
效果如下图
|
||||

|
||||