React Native開發入門

目錄：

1、前言

2、什麼是React Native

3、開發環境搭建

4、預備知識

5、最簡單的React Native小程序

6、總結

7、參考資料

 

1、前言

雖然只是簡單的瞭解了一下React的皮毛，可是對React Native的學習就輕鬆了好多。因此在學習React Native以前，最好仍是先學習一下 React。由於我學習的iOS開發，對iOS更加了解，因此裏面主要涉及到的平臺也是iOS。

 

2、什麼是React Native

React Native是一款用來開發真正原生、可渲染iOS和Android移動應用的JavaScript框架。 它和React的最大的區別就是React是將瀏覽器做爲渲染平臺，而React Native則是將移動設備做爲渲染平臺。

與Web平臺的React相似，React Native也實用JSX進行開發，這種編程語言結合了JavaScript和類XML標記語言。React Native在後臺經過橋接的方式調用由OC或Java開發的原生渲染接口，所以應用會使用真正的原生移動UI組件，而不是傳統的WebView渲染方式，進而擁有與其餘移動應用同樣的外觀和體驗。

React Native的聲明週期和React相同，當屬性（props）或狀態（state）發生改變的時候，React Native會從新渲染視圖。

React Native並非在主線程上運行，它能夠不影響用於體驗的前提下執行中這些異步調用。

React Native工做原理：

React Native也是用的JSX語法。

 

3、開發環境搭建

首先，你應該安裝 Homebrew。它是Mac系統的通用包管理工具能夠用來安裝React Native的相關依賴。這裏假設你已經安裝了Homebrew。

第一步：

接下來打開終端，輸入如下命令：

1、brew install node
2、brew install watchman
3、brew install flow （安裝的類型檢查庫）

若是你在安裝過程當中遇到問題，可能須要更新一下brew和相關依賴包：

1、brew update
2、brew upgrade

第二步：

假設你已經安裝好了node，就能夠經過npm（node包管理器）來安裝React Native 命令行工具了。打開終端，輸入：

npm install -g react-native-cli

這個步驟將會在系統上全局安裝React Native。

若是已經完成上述兩步，開發環境也就已經搭建完成了。

 

4、預備知識

這裏面假設你已經對React有了必定的瞭解（能夠參考 這裏），對Node有了必定的瞭解。

 

5、最簡單的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工程代碼。

一、先看看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本身開發的工程，應該是定義了一些類以及其餘公共模塊。

二、註冊頂層組件

打開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來喚起開發工具。

 

6、總結

根據書籍和博客的學習，本身終於跑出了第一個React Native小程序：Hello,world！如今只是最簡單的入門知識，僅僅是對React Native有了一個簡單的瞭解，若是想進一步學習，能夠到 React Native官網。

 

7、參考資料

     1. React Native官方文檔

     2. React Native開發指南

 

附：

源碼： https://github.com/ScottZg/ReactNative-Helloworld/tree/master

若有問題，隨時留言聯繫。