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/