iOS 集成React Native超強實用入門筆記

環境安裝

 

1.homebrew安裝, 官方：https://brew.sh/

　　

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

　如果官方的方式安裝不了，參考：https://www.cnblogs.com/xiaopin/p/12941251.html

2.Node安裝：

brew install node

　　

3.watchman安裝：

 brew install watchman

　　

4.Node工具源切換

#淘寶
npx nrm use taobao
#或
#官方源
npx nrm use npm

　　

5.yarn 安裝，替換npm的工具，加速node模塊的下載

　　

npm install -g yarn

 

6.安裝xcode, 並在 Xcode > Preferences > Locations > Command Line Tools配置一個Xcode

7.安裝cocoapods, 參考：https://www.cnblogs.com/xiaopin/p/12941251.html

 

創建RN項目

1.創建RN新項目，創建一個默認最新版本RN的項目，或者指定RN版本項目

npx react-native init 項目名稱

#npx react-native init 項目名稱 --version 0.63.3

　　

2.編譯運行

cd AwesomeProject
yarn ios 
#或者 
yarn react-native run-ios

　　正常情況下啓動模擬器可以正常運行

 

將RN繼承到現有項目

用官方的教程方式步驟集成到現有項目有問題，無法正確的Pod install類庫，也沒人更新，一萬個草泥馬，整死人！拋棄官方教程，看我的：

 

1.構建RN目錄結構，用默認方式創建將一個RN項目，把主要的幾個文件和目錄，複製到出來，如下：

MyProject
    App.js
    app.json
    index.js
    ios
    package.json

 

2.修改app.json， 改成自己的項目名稱

{
  "name": "MyProject",
  "displayName": "MyProject"
}

　　

3.修改package.json, name改成自己的項目名稱, 指定項目版本，指定引用的React-Native版本，參考複製過來的東西，但是用下面這個幾個配置就可以了

{
  "name": "MyProject",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "yarn react-native start"
  },
  "dependencies": {
    "react-native": "^0.63.3"
  }
}

　　

3.如果用了git管理代碼，把node_modules/目錄記錄到.gitignore忽略文件中

4.在ios目錄下面，創建一個自己的iOS項目，可以用Swift,OC，目錄下創建或者從其他項目中複製一個Podfile文件過來

5.Podfile配置 【重點問題】，PS: 一萬個草泥馬的根源

source 'https://github.com/CocoaPods/Specs.git'

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
  
platform :ios ,'10.0'
use_frameworks!

target 'MyProject' do

  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])
end

　

然後在命令行中：pod install一下，集成到現有項目就完成了

 

中文官方：https://reactnative.cn/