React Native 嵌入到iOS原生應用

2021-07-31 12:39:42 字數 3999 閱讀 9353

如果你正準備從頭開始製作乙個新的應用,那麼react native會是個非常好的選擇。但如果你只想給現有的原生應用中新增一兩個檢視或是業務流程,react native也同樣不在話下。只需簡單幾步,你就可以給原有應用加上新的基於react native的特性、畫面和檢視等。

把react native元件植入到ios應用中有如下幾個主要步驟:

首先當然要了解你要植入的react native元件。

建立乙個podfile,在其中以subspec的形式填寫所有你要植入的react native的元件。

建立js檔案,編寫react native元件的js**。

啟動react native的packager服務,執行應用。

根據需要新增更多react native的元件。

除錯。準備部署發布 (比如可以利用react-native-xcode.sh指令碼)。

發布應用,公升職加薪,走向人生巔峰!��

這個就不多說。

react native的植入過程同時需要reactreact native兩個node依賴包。我們把具體的依賴包記錄在package.json檔案中。如果專案根目錄中沒有這個檔案,那就自己建立乙個。

然後在這個資料夾下建立乙個package.json檔案,就像這樣:

package.json檔案中的內容是這樣的:

,

"dependencies":

}

解釋一下:本文無法在這裡列出所有react native和對應的react版本要求,只能提醒讀者先嘗試執行npm install,然後注意觀察安裝過程中的報錯資訊,例如require react@某.某.某版本, but none was installed,然後根據這樣的提示,執行npm i -s react@某.某.某版本。使用npm(node包管理器,node package manager)來安裝react和react native模組。這些模組會被安裝到專案根目錄下的node_modules/目錄中。 在包含有package.json檔案的目錄(一般也就是專案根目錄,我這裡因為建立了rncomponent資料夾,所以是在這個資料夾目錄下執行這個命令)中執行下列命令來安裝:

$ npm install
執行完成後會出現node_modules這樣乙個資料夾,這個資料夾下包含了rn的一些模組,就像這樣:

react native框架整體是作為node模組安裝到專案中的。下一步我們需要在cocoapods的podfile中指定我們所需要使用的元件。

在你開始把react native植入到你的應用中之前,首先要決定具體整合的是react native框架中的哪些部分。而這就是subspec要做的工作。在建立podfile檔案的時候,需要指定具體安裝哪些react native的依賴庫。所指定的每乙個庫就稱為乙個subspec

reactreact native模組成功安裝到node_modules目錄之後,你就可以開始建立podfile以便選擇所需的元件安裝到應用中。

建立podfile在這裡不在多說,相信只要用過cocoapods的朋友都知道。

podfile建立完成之後,在檔案裡新增一下內容:

# target的名字一般與你的專案名字相同

target 'nativern'

do# 'node_modules'目錄一般位於根目錄中

# 但是如果你的結構不同,那你就要根據實際路徑修改下面的`:path`

pod 'react', :path => './rncomponent/node_modules/react-native', :subspecs => [

'core',

'rcttext',

'rctnetwork',

'rctwebsocket', # 這個模組是用於除錯功能的

# 在這裡繼續新增你所需要的模組

] # 如果你的rn版本 >= 0.42.0,**入下面這行

pod "yoga", :path => "./rncomponent/node_modules/react-native/reactcommon/yoga"

end

然後執行下面的��命令,開始安裝react native的pod包。

$ pod install
首先建立乙個空的index.ios.js檔案。一般來說我們把它放置在專案根目錄下。就像��:

index.ios.js是react native應用在ios上的入口檔案。而且它是不可或缺的!它可以是個很簡單的檔案,簡單到可以只包含一行require/import匯入語句。

# 在專案根目錄執行以下命令建立檔案:

$ touch index.ios

.js

import react,  from 'react';

import from 'react-native';

export default

class

nativern

extends

component >

welcome to react native!

to get started, edit

index.ios.js

press cmd+r to reload,

cmd+d or shake for dev menu

);}}

const styles = stylesheet.create(,

welcome: ,

instructions: ,

});

我這裡先建立了乙個viewcontroller,��這樣:

然後匯入#import 標頭檔案,��這樣:

- (void)viewdidload
還需要在info.plist檔案中配置一下:

配置後的效果:

$ npm start
執行專案,看到效果:

部落格位址

react native (五)嵌入到原生應用

今天一天算是只研究了這部分,現在把不用終端 react native init命令建立工程,直接在現有的工程上嵌入react native,現將步驟歸結如下 1.先建乙個空資料夾實際上 命名我都和現有xcode工程名相同 然後把你工程的資料夾拽入該資料夾中,並將工程資料夾改為ios 目的和官方文件上...

React Native發布APP之打包iOS應用

和打包react native android應用不同的是,我們無法通過命令一步進行匯出react native ios應用。我們需要將js部分的 和資源等打包匯出,然後通過xcode將其新增到ios專案中。匯出js bundle的命令 在react native專案的根目錄下執行 生成jsbund...

React Native發布APP之打包iOS應用

第一步 匯出js bundle包和資源 和打包react native android應用不同的是,我們無法通過命令一步進行匯出react native ios應用。我們需要將js部分的 和資源等打包匯出,然後通過xcode將其新增到ios專案中。匯出js bundle的命令 在react nati...