iOS 混合開發 —— reactNative

一、reactNative 的文檔

reactNative中文官網     http://reactnative.cn/

免費教學視訊 ：

CSDN 藍鷗教育訓練視訊： http://edu.csdn.net/course/detail/3129/52501?auto_start=1

搭建好運作環境就可以 建立我們的 RN 應用：(指令行裡面 cd 到想建立工程的檔案夾)

react-native init RNApp --version 0.44.3

js 裡面寫個 hellp word 看看 RN 究竟是什麼東東。

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

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

// 注意，這裡用引号括起來的'HelloWorldApp'必須和你init建立的項目名一緻
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
           

　　

那這段代碼是什麼意思呢？

　　初看這段代碼，可能覺得并不像JavaScript--沒錯，這是“未來”的JavaScript的。

　　首先你需要了解ES2015（也叫作ES6） - 這是一套對JavaScript的文法改進的官方标準。但是這套标準目前還沒有在所有的浏覽器上完整實作，是以目前而言web開發中還很少使用.React原生内置了對ES2015标準的支援，你可以放心使用而無需擔心相容性問題。上面的示例代碼中的

import

， ，

from

，

class

，

extends

以及

() =>

箭頭函數等新文法都是ES2015中的特性。如果你不熟悉ES2015的話，看看可以阮一峰老師的書，論壇還有的這篇總結。

　　示例的這一行

<Text>Hello world!</Text>

恐怕很多最人看起來也。覺得陌生。這叫做JSX--是一種在JavaScript的中嵌入XML結構的文法。很多傳統的應用架構會設計自有的模闆文法，讓你在結構标記中嵌入代碼.React反其道而行之，設計的JSX文法卻是讓你在代碼中嵌入結構标記。初看起來，這種寫法很像網絡上的HTML，隻不過使用的并不是網絡上常見的标簽如

<div>

或是

<span>

等，這裡我們使用的是React Native的元件。上面的示例代碼中，使用的是内置的

<Text>

元件，它專門用來顯示文本。

元件與AppRegistry 

上一個代碼定義了一個名為

HelloWorldApp

的新的

元件（Component）

，并且使用了名為

AppRegistry

的内置子產品進行了“注冊”操作。你在編寫React Native應用時，肯定會寫出很多新的元件。而一個App的最終界面，其實也就是各式各樣的元件的組合元件本身結構可以非常簡單-必須唯一就是的在

render

方法中報道檢視一些用于渲染結構的JSX語句。

AppRegistry

子產品是用來告知React Native哪一個元件被注冊為整個應用的根容器你無需在

AppRegistry.registerComponent

這個深度，因為一般在整個應用中這個方法隻會調用一次上面的代碼裡已經包含了具體的用法，隻需你複制整個到

index.ios.js

或是

index.android.js

檔案中即可運作。

二、reactNative 的見解：

1、傳統的HybridApp開發方式，它們的原理其實就是在一個運作在Webview中的app，隻不過這個Webview比較特殊而已。

2、React Native 完全不是這樣！不算是一種傳統的HybirdApp開發方式

3、React Native 是最終還是會把你寫的代碼轉換成原生的代碼進行編譯。這就意味着RN開發出來的APP是無限逼近原生APP的性能的。

 【參考資料】

   https://github.com/reactnativecn/react-native-guide

github位址: https://github.com/lc081200/hybirdApp

轉載于:https://www.cnblogs.com/saytome/p/7144669.html