為什么使用react native？
既擁有Native的用戶體驗、又保留React的開發(fā)效率?！?a target="_blank" rel="nofollow">React Native的發(fā)布稿
react native通過一次編寫可以在IOS和Android設(shè)備上運行。這樣可以為公司節(jié)約成本，使代碼更好維護。（不用再招2大客戶端的程序員、代碼也不需要維護2套，但現(xiàn)在還有一些組件是屬于IOS或者Android專有的所以請盡量選擇使用那些用JavaScript編寫的組件）。只要熟悉web開發(fā)，就可以成為潛在的客戶端開發(fā)者。使用單一的JavaScript庫就能寫出真正的原生的iOS和Android的應(yīng)用來。當(dāng)然學(xué)習(xí)react時需要理解其中的概念，還是有些時間成本。那么什么又是react native呢？請往下看。
什么是react native？
Facebook在2015年發(fā)布了react native的第一個版本?？梢曰谀壳按鬅岬拈_源JavaScript庫React.js來開發(fā)iOS和Android原生App。只要編寫一次，能在任何手機端上跑。
-
Build Native Mobile Apps using JavaScript and React。
react native 僅僅使用JavaScript就能讓你編寫一個原生的手機App。使用起來有點像React，讓你使用組件式的形式編寫手機App。
它看起來像下面這個樣子。import React, { Component } from 'react'; import { Text, View } from 'react-native'; class WhyReactNativeIsSoGreat extends Component { render() { return ( <View> <Text> If you like React on the web, you'll like React Native. </Text> <Text> You just use native components like 'View' and 'Text', instead of web components like 'div' and 'span'. </Text> </View> ); } } -
使用react native編寫的app是一個真的手機App
使用react native，你不用編寫一個“mobile web app”或者 “HTML5 app”，你所編寫的App都是從 Objective-C 或者 Java原生而來。react native使用一些基本的UI組件去構(gòu)成IOS和Android的App。你只需使用JavaScript 和 react把這些組件組裝在一起。
例如像下面這樣一個例子，創(chuàng)建了一個可滑動的視圖。
import React, { Component } from 'react';
import { Image, ScrollView, Text } from 'react-native';class AwkwardScrollingImageWithText extends Component { render() { return ( <ScrollView> <Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} /> <Text> On iOS, a React Native ScrollView uses a native UIScrollView. On Android, it uses a native ScrollView. On iOS, a React Native Image uses a native UIImageView. On Android, it uses a native ImageView. React Native wraps the fundamental native components, giving you the performance of a native app, plus the clean design of React. </Text> </ScrollView> ); } } -
不要把時間浪費到重新編譯上
react native能讓你快速的編寫一個app，在重新編譯這塊，你可以立刻看到看到你修改的效果。使用熱重載技術(shù)，你甚至可以在運行新的代碼，并且保留應(yīng)用的狀態(tài)。
熱重載技術(shù) -
需要時可以使用原生的代碼
react native可以毫不費力的，與Objective-C、java、swift寫的原生組件橋接起來。
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { TheGreatestComponentInTheWorld } from './your-native-code';class SomethingFast extends Component { render() { return ( <View> <TheGreatestComponentInTheWorld /> <Text> TheGreatestComponentInTheWorld could use native Objective-C, Java, or Swift - the product development process is the same. </Text> </View> ); } }
如何初始化你的第一個react native項目
由于操作系統(tǒng)的原因，和環(huán)境的問題，暫時演示，IOS App的初始化
-
需要node.js, React Native 命令行工具和Watchman
推薦使用Homebrew安裝node.js和Watchman。
brew install node
brew install watchman
- 使用npm安裝 React Native 命令行工具接口
npm install -g react-native-cli
-
測試安裝react native項目
使用react native命令行工具生成一個新的react native項目，命名為MyFirstRNApp，然后進入項目的根目錄，運行react-native run-iso命令
react-native init MyFirstRNApp
cd MyFirstRNApp
react-native run-ios
-
react-native init MyFirstRNApp
初始化中的MyFirstRNApp
初始化MyFirstRNApp成功 -
react-native run-ios
編譯中
編譯成功后彈出，react native控制臺頁面
第一個react native項目頁面
react native項目結(jié)構(gòu)介紹
在項目根目錄下有3個文件夾，2個js文件，一個json文件
- 文件夾 android
主要存放關(guān)于項目android的文件 - 文件夾 ios
主要存放關(guān)于項目ios的文件 - 文件夾 node_modules
存放的是一些項目依賴包 - index.android.js
為安卓 app的入口文件 - index.ios.js
為iOS app的入口文件 - package.json
為該項目依賴包的管理文件
-
index.ios.js 入口文件解析
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*///es6的語法格式 import React, { Component } from 'react'; import { AppRegistry, //入口文件必備,提供整個app組件注冊的功能 StyleSheet, //樣式表 Text, //react native 提供的組件 Text View //react native 提供的組件 View } from 'react-native'; //js的類文件 class MyFirstApp extends Component { //渲染返回包裝好的組件 render() { //返回包裝好的組件 return ( <View style={styles.container}> /*相當(dāng)于div*/ <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </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, }, }); AppRegistry.registerComponent('MyFirstApp', () => MyFirstApp);
以上這就是使用JavaScript和react構(gòu)建的一個原始App的代碼，很簡單吧。
淺析react native架構(gòu)
- 1.在不同平臺上使用js和jsx語法編寫react代碼，js解釋器可以在不同平臺運行。
- 2.通過虛擬DOM更新和刷新狀態(tài)進行對組件的重新渲染
- 3.將結(jié)果展示到不同的終端
jsx
jsx是JavaScript的語法延伸，看起來像XML結(jié)構(gòu)。目前react native支持ES6的語法。
虛擬DOM
React中的DOM并不保證馬上影響真實的DOM，react會等到事件循環(huán)結(jié)束，利用diff算法，通過當(dāng)前新DOM樹與之前的DOM樹作比較，計算出最小的步驟更新真實的DOM。這樣做的好處是性能得到了很大的保證。
總結(jié)
本文對react native是什么，能做什么，做了一個大致的了解，并創(chuàng)建了一個全新的react native項目并成功編譯運行，了解了項目中的結(jié)構(gòu)，和接口文件中的內(nèi)容。淺析了react native架構(gòu)，理解了LEARN ONCE, WRITE ANYWHERE的道理。簡單闡述了，當(dāng)前版本所支持的語法版本，和解釋什么是虛擬DOM，和它的作用。
成熟案例
參考
https://facebook.github.io/react-native/docs/getting-started.html
