- 背景
- 搭建開(kāi)發(fā)環(huán)境
- 第一個(gè)React-Native App
- 需要知道的JSX和ES6語(yǔ)法
- 組件的屬性(props)和狀態(tài)(state)
- 組件生命周期
- 樣式(StyleSheet)
- 常用組件
背景
為什么需要React-Native纪岁？
在React-Native出現(xiàn)之前移動(dòng)端主流的開(kāi)發(fā)模式是原生開(kāi)發(fā)和Hybrid開(kāi)發(fā)（H5混合原生開(kāi)發(fā)）卢佣，Hybrid app相較于native app的優(yōu)勢(shì)是開(kāi)發(fā)成本低開(kāi)發(fā)速度快(H5頁(yè)面開(kāi)發(fā)跨平臺(tái)，無(wú)需重新寫web陵究、android奢人、ios代碼)蓬戚，盡管native app在開(kāi)發(fā)上需要更多時(shí)間饺著，但卻帶來(lái)了更好的用戶體驗(yàn)(頁(yè)面渲染亚隙、手勢(shì)操作的流暢性)磁餐，也正是基于這兩點(diǎn)Facebook在2015年推出了React-Native
What we really want is the user experience of the native mobile platforms, combined with the developer experience we have when building with React on the web.
上文摘自React-Native發(fā)布稿，React-Native的開(kāi)發(fā)既保留了React的開(kāi)發(fā)效率又擁有媲美原生的用戶體驗(yàn)阿弃，其運(yùn)行原理并非使用webview所以不屬于Hybrid開(kāi)發(fā)诊霹，想了解的可以查看React Native運(yùn)行原理解析這篇文章羞延。React-Native提出的理念是‘learn once，write every where’脾还，之所以不是‘learn once, run every where’伴箩，是因?yàn)椴煌脚_(tái)的用戶體驗(yàn)有所不同，因此要運(yùn)行全平臺(tái)仍需要一些額外的適配鄙漏，這里是Occhino對(duì)React-Native的介紹嗤谚。
上面兩張圖展示了React-Native的對(duì)于開(kāi)發(fā)者的熱門程度，且官方對(duì)其的開(kāi)發(fā)狀態(tài)一直更新泥张，這也是其能搶占原生開(kāi)發(fā)市場(chǎng)的重要因素呵恢。
搭建開(kāi)發(fā)環(huán)境
在創(chuàng)建項(xiàng)目前我們需要先搭建React-Native所需的開(kāi)發(fā)環(huán)境。
第一步需要先安裝nodejs媚创、python2渗钉、jdk8（windows有所不同，推薦使用macos開(kāi)發(fā)钞钙，輕松省事）
brew install node //macos自帶python和jdk
第二步安裝React Native CLI
npm install -g react-native-cli
第三步安裝Android Studio鳄橘，參考官方的開(kāi)發(fā)文檔
創(chuàng)建第一個(gè)應(yīng)用
使用react-native命令創(chuàng)建一個(gè)名為HelloReactNative的項(xiàng)目
react-native init HelloReactNative
等待其下載完相關(guān)依賴后，運(yùn)行項(xiàng)目
react-native run-ios
or
react-native run-android
成功運(yùn)行后的出現(xiàn)的界面是這樣的
基本的JSX和ES6語(yǔ)法
先看一下運(yùn)行成功后的界面代碼
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
//noinspection BadExpressionStatementJS
type
Props = {};
//noinspection JSAnnotator
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
代碼中出現(xiàn)的import芒炼、export瘫怜、extends、class以及未出現(xiàn)的() =>箭頭函數(shù)均為ES6需要了解的基礎(chǔ)語(yǔ)法本刽，import表示引入需要的模塊鲸湃，export表示導(dǎo)出模塊，extends表示繼承自某個(gè)父類子寓，class表示定義一個(gè)類暗挑，()=>為箭頭函數(shù)，用此語(yǔ)法定義的函數(shù)帶有上下文信息斜友，因此不必再處理this引用的問(wèn)題炸裆。
<Text style={styles.welcome}>Welcome to React Native!</Text>這段代碼是JSX語(yǔ)法使用方式，和html標(biāo)記語(yǔ)言一樣鲜屏，只不過(guò)這里引用的是React-Native的組件烹看，Text是一個(gè)顯示文本的組件，可以看到style={styles.welcome}這是JSX的另一個(gè)語(yǔ)法可以將有效的js表示式放入大括號(hào)內(nèi)洛史，Welcome to React Native!為其內(nèi)容文本惯殊，可以嘗試修改他的內(nèi)容為Hello React Native!，刷新界面后
熟悉更多的ES6語(yǔ)法有助于更有效率的開(kāi)發(fā)也殖。
組件的屬性和狀態(tài)
在了解了一些基本的JSX和ES6語(yǔ)法后靠胜，我們還需要了解兩個(gè)比較重要的概念即props和state，props為組件的屬性，state為組件的狀態(tài)浪漠，兩者間的區(qū)別在于陕习，props會(huì)在組件被實(shí)例化時(shí)通過(guò)構(gòu)造參數(shù)傳入，所以props的傳遞為單向傳遞址愿，且只能由父組件控制该镣，state為組件的內(nèi)部狀態(tài)由組件自己管理，不受外界影響响谓。props和state都能修改組件的狀態(tài)损合，兩者的改變會(huì)導(dǎo)致相關(guān)引用的組件狀態(tài)改變，也就是說(shuō)在組件的內(nèi)部存在子組件引用了props和state娘纷，那么當(dāng)發(fā)生改變時(shí)相應(yīng)子組件會(huì)重新渲染嫁审，其實(shí)這里也可以看出props和state的使用聯(lián)系，父組件可以通過(guò)setState修改state赖晶，并將其傳遞到子組件的props中使子組件重新渲染從而使父組件重新渲染律适。
組件生命周期
組件的生命周期會(huì)經(jīng)歷三個(gè)階段
Mounting:掛載
Updating:更新
Unmounting:移除
對(duì)應(yīng)的生命周期回調(diào)方法為
componentWillMount()//組件將要掛載時(shí)調(diào)用
render()//組件渲染時(shí)調(diào)用
componentDidMount()//組件掛載完成時(shí)調(diào)用
componentWillReceiveProps(object nextProps)//組件props和state改變時(shí)調(diào)用
shouldComponentUpdate(object nextProps,object nextState)//返回false不更新組件，一下兩個(gè)方法不執(zhí)行
componentWillUpdate(object nextProps,object nextState)//組件將要更新時(shí)調(diào)用
componentDidUpdate(object nextProps,object nextState)//組件完成更新時(shí)調(diào)用
componentWillUnmount()//組件銷毀時(shí)調(diào)用
這里我們需要重點(diǎn)關(guān)注的地方在于組件運(yùn)行的階段遏插，組件每一次狀態(tài)收到更新都會(huì)調(diào)用render()方法捂贿，除非shouldComponentUpdate方法返回false，可以通過(guò)此方法對(duì)組件做一些優(yōu)化避免重復(fù)渲染帶來(lái)的性能消耗胳嘲。
樣式
React-Native樣式實(shí)現(xiàn)了CSS的一個(gè)子集厂僧，樣式的屬性與CSS稍有不同，其命名采用駝峰命名了牛，對(duì)前端開(kāi)發(fā)者來(lái)說(shuō)基本沒(méi)差颜屠。使用方式也很簡(jiǎn)單，首先使用StyleSheet創(chuàng)建一個(gè)styles
const styles = StyleSheet.create({
container:{
flex:1
}
})
然后將對(duì)應(yīng)的style傳給組件的style屬性鹰祸，例如<View style={styles.container}/>
常用組件
在日常開(kāi)發(fā)中最常使用的組件莫過(guò)于View,Text,Image,TextInput的組件甫窟。
View基本上作為容器布局，在里面可以放置各種各樣的控件福荸，一般只需要為其設(shè)置一個(gè)style屬性即可蕴坪，常用的樣式屬性有flex,width,height,backgroundColor,flexDirector,margin,padding更多可以查看Layout Props肴掷。
Text是一個(gè)顯示文本的控件敬锐，只需要在組件的內(nèi)容區(qū)填寫文字內(nèi)容即可，例如<Text>Hello world</Text>,可以為設(shè)置字體大小和顏色<Text style={{fontSize:14,color:'red'}}>Hello world</Text>,同時(shí)也支持嵌套Text呆瞻，例如
<Text style={{fontWeight: 'bold'}}>
I am bold
<Text style={{color: 'red'}}>
and red
</Text>
</Text>
TextInput是文本輸入框控件台夺，其使用方式也很簡(jiǎn)單
<TextInput
style={{width:200,height:50}}
onChangeText={(text)=>console.log(text)}
/>
style設(shè)置了他的樣式，onChangeText傳入一個(gè)方法痴脾，該方法會(huì)在輸入框文字發(fā)生變化時(shí)調(diào)用颤介，這里我們使用console.log(text)打印輸入框的文字。
Image是一個(gè)圖片控件，幾乎所有的app都會(huì)使用圖片作為他們的個(gè)性化展示滚朵，Image可以加載本地和網(wǎng)絡(luò)上的圖片冤灾，當(dāng)加載網(wǎng)絡(luò)圖片時(shí)必須設(shè)定控件的大小，否則圖片將無(wú)法展示
加載本地圖片,圖片地址為相對(duì)地址
<Image style={{width:100,height:100}} source={require('../images/img001.png')}/>
加載網(wǎng)絡(luò)圖片
<Image style={{width:100,height:100}} source={{uri:'https://facebook.github.io/react-native/docs/assets/favic
