React Native開發入門，reactnative入門

React Native開發入門，reactnative入門

目錄：

一、前言二、什麼是React Native三、開發環境搭建四、預備知識五、最簡單的React Native小程式六、總結七、參考資料 一、前言雖然只是簡單的瞭解了一下React的皮毛，但是對React Native的學習就輕鬆了好多。所以在學習React Native之前，最好還是先學習一下React。因為我學習的iOS開發，對iOS更加瞭解，所以裡面主要涉及到的平台也是iOS。 二、什麼是React NativeReact Native是一款用來開發真正原生、可渲染iOS和Android行動裝置 App的JavaScript架構。它和React的最大的區別就是React是將瀏覽器作為渲染平台，而React Native則是將行動裝置作為渲染平台。與Web平台的React類似，React Native也實用JSX進行開發，這種程式設計語言結合了JavaScript和類XML標記語言。React Native在後台通過橋接的方式調用由OC或Java開發的原生渲染介面，因此應用匯實用真正的原生移動UI組件，而不是傳統的WebView渲染方式，進而擁有與其他行動裝置 App一樣的外觀和體驗。React Native的聲明周期和React相同，當屬性（props）或狀態（state）發生改變的時候，React Native會重新渲染視圖。React Native並不是在主線程上運行，它可以不影響用於體驗的前提下執行中這些非同步呼叫。React Native工作原理：React Native也是用的JSX文法。 三、開發環境搭建首先，你應該安裝Homebrew。它是Mac系統的通用包管理工具可以用來安裝React Native的相關依賴。這裡假設你已經安裝了Homebrew。第一步：接下來開啟終端，輸入以下命令：

1、brew intsall node2、brew install watchman3、brew install flow （安裝的類型檢查庫）

如果你在安裝過程中遇到問題，可能需要更新一下brew和相關依賴包：

1、brew update2、brew upgrade

第二步：假設你已經安裝好了node，就可以通過npm（node包管理器）來安裝React Native 命令列工具了。開啟終端，輸入：

npm install -g react-native-cli

這個步驟將會在系統上全域安裝React Native。如果已經完成上述兩步，開發環境也就已經搭建完成了。 四、預備知識這裡面假設你已經對React有了一定的瞭解（可以參考這裡），對Node有了一定的瞭解。 五、最簡單的React Native小程式這裡我們還是來建立一個Hello，World！的小程式。在命令列裡面輸入以下命令列，它會為你產生一個包含React Native,iOS和Android的全新模板工程：react-native init HelloWorld建立過程可能會有點慢，稍微等待一會。初始化完成之後如下所示：我們可以看到，初始化完成之後，有文字提示，如何在iOS上運行app，如何在Android上運行app。我們先開啟組建目錄下的index.ios.js檔案修改其中的class Helloworld如下：

export default class Helloworld extends Component {  render() {    return (      <View style={styles.container}>        <Text style={styles.welcome}>          Hello World!        </Text>      </View>    );  }} 

然後我們在終端執行即可。運行結果如下：這樣一個最簡單的React Native小程式Helloworld就完成了。接下來讓我們來看一下剛剛我們init的helloworld工程代碼。1、先看看Appdelegate裡面的變化吧 

#import "AppDelegate.h"#import "RCTBundleURLProvider.h"#import "RCTRootView.h"@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{  NSURL *jsCodeLocation;  jsCodeLocation = [[RCTBundleURLProvidersharedSettings] jsBundleURLForBundleRoot:@"index.ios"fallbackResource:nil];  RCTRootView *rootView = [[RCTRootViewalloc] initWithBundleURL:jsCodeLocation                                                      moduleName:@"Helloworld"                                               initialProperties:nil                                                   launchOptions:launchOptions];  rootView.backgroundColor = [[UIColoralloc] initWithRed:1.0fgreen:1.0fblue:1.0falpha:1];  self.window = [[UIWindowalloc] initWithFrame:[UIScreenmainScreen].bounds];  UIViewController *rootViewController = [UIViewControllernew];  rootViewController.view = rootView;  self.window.rootViewController = rootViewController;  [self.windowmakeKeyAndVisible];  returnYES;}@end

其實看過就會發現，原來React Native只是重寫了Appdelegate的rootViewController的根視圖。然後Xcode項目工程裡面有了一個Libraries檔案夾，裡面有好幾個工程，裡面其實就是FeceBook自己開發的工程，應該是定義了一些類以及其他公用模組。2、註冊頂層組件開啟index.ios.js，如下：

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';export default class Helloworld extends Component {  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: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});AppRegistry.registerComponent('Helloworld', () => Helloworld); 

最後一句registerComponent寶樓了Helloworld組件，使得我們能夠在AppDelegate.m檔案中使用它。大多數情況下，我們不需要去修改這個模板代碼。其中的：

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native'; 

其中的import React用於匯入React。註：這裡採用的是ES6標準（ECMAScript6，因為這裡面預設的就是ES6了，所以我就拿ES6來簡單說明了）。infoQ有一個簡單的介紹。React Native的使用方面有一點比較奇特，那就是你要匯入所需的每一個組件或者模組。其中的StyleSheet其實就是其中對組件中一些控制項的CSS。React Native中所有的樣式都採用樣式對象來代替傳統的樣式表，標準的做法就是利用StyleSheet庫進行樣式的編寫。我們可以使用command+R來重新運行程式，使用command+D來喚起開發工具。  六、總結根據書籍和部落格的學習，自己終於跑出了第一個React Native小程式：Hello,world！現在只是最簡單的入門知識，僅僅是對React Native有了一個簡單的瞭解，如果想進一步學習，可以到React Native官網。 七、參考資料     1.React Native官方文檔     2.React Native開發指南 附：源碼：https://github.com/ScottZg/ReactNative-Helloworld/tree/master如有問題，隨時留言聯絡。