1.RN是面向組件開(kāi)發(fā)
2.render()可以理解為一個(gè)函數(shù)玖姑，類似OC中的viewDidLoad()
3.JSX和組件的概念
React 的核心機(jī)制之一就是虛擬DOM:可以在內(nèi)存中創(chuàng)建的虛擬DOM缚陷，React利用虛擬DOM來(lái)減少對(duì)實(shí)際DOM的操作從而提升性能辜膝。傳統(tǒng)的創(chuàng)建方式是：
但這樣的代碼可讀性并不好，于是React發(fā)明了JSX，利用我們熟悉的HTML語(yǔ)法來(lái)創(chuàng)建虛擬DOM：
在實(shí)際開(kāi)發(fā)中，JSX在產(chǎn)品打包階段都已經(jīng)編譯成純JavaScript辅愿，JSX的語(yǔ)法不會(huì)帶來(lái)任何性能影響。因此忆某，JSX本身并不是什么高深的技術(shù)点待，可以說(shuō)只是一個(gè)比較高級(jí)但很直觀的語(yǔ)法糖。
4弃舒、 View組件中常見(jiàn)的屬性
React Native組件View癞埠，其作用等同于iOS中的UIView, Android中的android.view，或是網(wǎng)頁(yè)中的<div>標(biāo)簽聋呢，它是所有組件的父組件苗踪。
Flexbox 彈性布局
Transforms 動(dòng)畫(huà)屬性
backfaceVisibility enum('visible', 'hidden') 定義界面翻轉(zhuǎn)的時(shí)候是否可見(jiàn)
backgroundColor color
borderBottomColor color
borderBottomLeftRadius number
borderBottomRightRadius number
borderBottomWidth number
borderColor color
borderLeftColor color
borderLeftWidth number
borderRadius number
borderRightColor color
borderRightWidth number
borderStyle enum('solid', 'dotted', 'dashed')
borderTopColor color
borderTopLeftRadius number
borderTopRightRadius number
borderTopWidth number
borderWidth number
opacity number 設(shè)置透明度，取值從0-1坝冕；
overflow enum('visible', 'hidden') 設(shè)置內(nèi)容超出容器部分是顯示還是隱藏徒探；
elevation number 高度 設(shè)置Z軸，可產(chǎn)生立體效果喂窟。
5测暗、 View組件運(yùn)用
下圖就是View的基本運(yùn)用：
在圖中的render函數(shù)中，我們返回了一個(gè)頂層的View磨澡，然后View中包含著另一個(gè)子層的View碗啄。
在頂層的View中的style屬性里面設(shè)置了其占滿父控件，內(nèi)邊距為30稳摄，背景顏色為黃色 稚字；對(duì)應(yīng)子層中的View的style屬性中設(shè)置了寬度300，高度50厦酬，背景色為紅色胆描。 這是我們熟悉的css寫(xiě)法。
運(yùn)行結(jié)果如下：
在React Native開(kāi)發(fā)中仗阅，更加推薦我們采用StyleSheet來(lái)進(jìn)行組件的布局昌讲，這樣的話，代碼在結(jié)構(gòu)上會(huì)更加的清晰减噪、也有利于后期維護(hù)短绸。
下面我們采用StyleSheet來(lái)實(shí)現(xiàn)一下:
import React, { Component } from 'react';
import {
AppRegistry, // 注冊(cè)
StyleSheet, // 樣式
Text, // 文本組件
View, // 視圖組件
Image,
TextInput
} from 'react-native';
// 繼承自Component的類AwesomeProject
export default class AwesomeProject extends Component {
// 初始化方法 用來(lái)返回具體的組件內(nèi)容
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Hello World!
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
},
welcome: {
fontSize: 30,
textAlign: 'center',
margin: 10,
}
});
6、Flex布局
之前應(yīng)用到的界面的搭建都是采用CSS布局筹裕，基于盒子模型醋闭，依賴 display屬性 ， position屬性朝卒， float屬性证逻。但對(duì)于那些特殊布局非常不方便，比如抗斤，垂直居中囚企。
一種全新的針對(duì)web和移動(dòng)開(kāi)發(fā)布局應(yīng)運(yùn)而生：Flex布局，可以簡(jiǎn)便豪治、完整洞拨、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。目前负拟，它已經(jīng)得到了所有瀏覽器的支持烦衣，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能掩浙。
1）什么是FlexBox
flexible（形容詞）：能夠伸縮或者很容易變化花吟，以適應(yīng)外界條件的變化
box（名詞）：通用的矩形容器
2）什么是FlexBox布局?
彈性盒模型（The Flexible Box Module）,又叫Flexbox，意為“彈性布局”厨姚，旨在通過(guò)彈性的方式來(lái)對(duì)齊和分布容器中內(nèi)容的空間衅澈，使其能適應(yīng)不同屏幕，為盒裝模型提供最大的靈活性谬墙。
Flex布局主要思想是：讓容器有能力讓其子項(xiàng)目能夠改變其寬度今布、高度（甚至是順序）经备，以最佳方式填充可用空間；React native中的FlexBox是這個(gè)規(guī)范的一個(gè)子集部默。
3）大部分情況下是處理圖中FlexItem在FlexContainer中的位置和尺寸關(guān)系
移動(dòng)開(kāi)發(fā)中FlexBox布局非常重要
export default class BViewDemo extends Component {
render() {
return (
<View style={styles.container}>
{/*<Text>其實(shí)我是存在的</Text>*/}
<View style={styles.innerViewStyle}>
<Text>我是里邊的View</Text>
</View>
<View style={styles.innerViewStyle2}>
<Text>我是里邊下面的View</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
// flex: 1,
backgroundColor: 'red',
width: 300,
height: 100,
// 改變主軸方向
flexDirection: 'row-reverse'
},
innerViewStyle: {
backgroundColor: 'green',
width: 100,
},
innerViewStyle2: {
backgroundColor: 'yellow',
width: 100,
},
});
7侵蒙、Flexbox在開(kāi)發(fā)中的應(yīng)用場(chǎng)景
（1）Flexbox在布局中能夠解決什么問(wèn)題？
浮動(dòng)布局
各種機(jī)型屏幕的適配
水平和垂直居中
自動(dòng)分配寬度
......
（2） 在CSS中傅蹂，常規(guī)的布局是基于塊和內(nèi)聯(lián)流方向纷闺，而Flex布局是基于flex-flow流,下圖很好解釋了Flex布局的思想：
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start份蝴，結(jié)束位置叫做main end犁功；交叉軸的開(kāi)始位置叫做cross start，結(jié)束位置叫做cross end婚夫。
項(xiàng)目默認(rèn)沿主軸排列浸卦，單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size请敦。
（3）根據(jù)伸縮項(xiàng)目排列方式的不同镐躲，主軸和側(cè)軸方向也有所變化：
8、Flexbox的常用屬性
（1）容器屬性
a) flexDirection: row | row-reverse | column | column-reverse
該屬性決定主軸的方向（即項(xiàng)目的排列方向）侍筛。
row：主軸為水平方向萤皂，起點(diǎn)在左端。
row-reverse：主軸為水平方向匣椰，起點(diǎn)在右端裆熙。
column(默認(rèn)值)：主軸為垂直方向，起點(diǎn)在上沿禽笑。
column-reverse：主軸為垂直方向入录，起點(diǎn)在下沿。
b）justifyContent:
flex-start | flex-end | center | space-between | space-around定義了伸縮項(xiàng)目在主軸線的對(duì)齊方式
flex-start(默認(rèn)值)：伸縮項(xiàng)目向一行的起始位置靠齊佳镜。
flex-end：伸縮項(xiàng)目向一行的結(jié)束位置靠齊僚稿。
center：伸縮項(xiàng)目向一行的中間位置靠齊。
space-between：兩端對(duì)齊蟀伸，項(xiàng)目之間的間隔都相等蚀同。
space-around：伸縮項(xiàng)目會(huì)平均地分布在行里，兩端保留一半的空間啊掏。
c） alignItems: flex-start | flex-end | center | baseline | stretch
定義項(xiàng)目在交叉軸上如何對(duì)齊蠢络，可以把其想像成側(cè)軸（垂直于主軸）的“對(duì)齊方式”。
flex-start：交叉軸的起點(diǎn)對(duì)齊迟蜜。
flex-end：交叉軸的終點(diǎn)對(duì)齊 刹孔。
center：交叉軸的中點(diǎn)對(duì)齊。
baseline：項(xiàng)目的第一行文字的基線對(duì)齊娜睛。<strong>在RN中不適用</strong>
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto髓霞，將占滿整個(gè)容器的高度卦睹。
export default class CFlexBoxDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={{backgroundColor: 'red', height: 30}}>第一個(gè)</Text>
<Text style={{backgroundColor: 'green', height: 50}}>第二個(gè)</Text>
<Text style={{backgroundColor: 'yellow', height: 40}}>第三個(gè)</Text>
<Text style={{backgroundColor: 'blue', height: 60}}>第四個(gè)</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'purple',
// 上邊距
marginTop: 25,
// 改變主軸的方向
flexDirection: 'row',
// 設(shè)置主軸線的對(duì)齊方式
justifyContent: 'space-between',
// 設(shè)置交叉軸上的對(duì)齊方式，該例子中交叉軸是豎直方法
alignItems: 'flex-start'
},
});
d) flexWrap: nowrap | wrap | wrap-reverse
默認(rèn)情況下酸茴，項(xiàng)目都排在一條線（又稱"軸線"）上分预。flex-wrap屬性定義兢交，如果一條軸線排不下薪捍，如何換行。
nowrap(默認(rèn)值)：不換行配喳。
wrap：換行酪穿，第一行在上方。
wrap-reverse：換行晴裹，第一行在下方被济。（和wrap相反）<strong>在RN中不適用</strong>
class CFlexBoxDemo2 extends Component {
render() {
return (
<View style={styles2.container}>
<Text style={{backgroundColor: 'red', width: 80}}>第一個(gè)</Text>
<Text style={{backgroundColor: 'green', width: 90}}>第二個(gè)</Text>
<Text style={{backgroundColor: 'yellow', width: 100}}>第三個(gè)</Text>
<Text style={{backgroundColor: 'blue', width: 110}}>第四個(gè)</Text>
</View>
);
}
}
const styles2 = StyleSheet.create({
container: {
backgroundColor: 'purple',
// 上邊距
marginTop: 25,
// 改變主軸的方向
flexDirection: 'row',
// 設(shè)置主軸線的對(duì)齊方式
justifyContent: 'flex-start',
// 設(shè)置交叉軸上的對(duì)齊方式，該例子中交叉軸是豎直方法
alignItems: 'flex-start',
flexWrap: 'wrap'
},
});
（2）元素屬性
a）flex
“flex-grow”涧团、“flex-shrink”和“flex-basis”三個(gè)屬性的縮寫(xiě)只磷， 其中第二個(gè)和第三個(gè)參數(shù)（flex-shrink、flex-basis）是可選參數(shù)泌绣。
默認(rèn)值為“0 1 auto”钮追。
寬度 ＝ 彈性寬度 * ( flexGrow / sum( flexGorw ) )
b）alignSelf: “auto | flex-start | flex-end | center | baseline | stretch”
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性阿迈。默認(rèn)值為auto元媚，表示繼承父元素的align-items屬性，如果沒(méi)有父元素苗沧，則等同于stretch刊棕。
class CFlexBoxDemo3 extends Component {
render() {
return (
<View style={styles3.container}>
<Text style={{backgroundColor: 'red', flex: 1, height: 60, alignSelf: 'flex-start'}}>第一個(gè)</Text>
<Text style={{backgroundColor: 'green', flex: 2, height: 70, alignSelf: 'flex-end'}}>第二個(gè)</Text>
<Text style={{backgroundColor: 'yellow', flex: 2, height: 80}}>第三個(gè)</Text>
<Text style={{backgroundColor: 'blue', flex: 1, height: 90}}>第四個(gè)</Text>
</View>
);
}
}
const styles3 = StyleSheet.create({
container: {
backgroundColor: 'purple',
// 上邊距
marginTop: 25,
// 改變主軸的方向
flexDirection: 'row',
// 設(shè)置主軸線的對(duì)齊方式
justifyContent: 'flex-start',
// 設(shè)置交叉軸上的對(duì)齊方式，該例子中交叉軸是豎直方法
alignItems: 'center',
},
});
9待逞、在React Native中使用Flexbox
(1)獲取當(dāng)前屏幕的寬度甥角、高度、分辨率
// 引入
var Dimensions = require('Dimensions')
class CFlexBoxDemo4 extends Component {
render() {
return (
<View style={styles4.outViewStyle}>
<Text>當(dāng)前屏幕的寬度：{Dimensions.get('window').width}</Text>
<Text>當(dāng)前屏幕的寬度：{Dimensions.get('window').height}</Text>
{/*分辨率*/}
<Text>分辨率：{Dimensions.get('window').scale}</Text>
</View>
);
}
}
const styles4 = StyleSheet.create({
outViewStyle: {
// 占滿屏幕
flex: 1,
// 主軸方向居中
justifyContent: 'center',
// 交叉軸方向居中
alignItems: 'center'
},
});
