Mac搭建RN环境并运行Xcode项目
2021-06-10 本文已影响0人
越来越胖了
此文章主要是记录mac上安装RN环境并运行xcode项目,未做过RN开发,只是为了解决RN项目集成iOS的SDK出错的问题.
RN官网
1.第一步,使用Homebrew来安装 Node 和 Watchman
brew install node
brew install watchman
2.第二步检测node版本
lepu@Mac-mini Desktop % node -v
v16.3.0
lepu@Mac-mini Desktop %
官方说低于12需要更新
3.第三步安装Yarn
npm install -g yarn
4.第四步:xcode,已安装(略)
5.第五步 cocoapods安装
sudo gem install cocoapods
如遇失败,必须解决
6.最后一步创建项目
//先卸载旧的react-native-cli命令行工具
npm uninstall -g react-native-cli
//然后cd到一个空文件夹创建项目
npx react-native init AwesomeProject
到此完成RN项目搭建
以下是安装过程的bug处理
- 创建项目报错
ERR! code 1
npm ERR! path /Users/lepu/Desktop/RNDemo/AwesomeProject/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@7.1.2
npm ERR! gyp info using node@14.17.0 | darwin | x64
npm ERR! gyp info find Python using Python version 3.9.0 found at "/usr/local/opt/python@3.9/bin/python3.9"
npm ERR! gyp info spawn /usr/local/opt/python@3.9/bin/python3.9
node_modules/canvas的安装有问题,去到我们的项目目录查看,发现没有创建node_modules文件夹,尝试了网上的各种方法,都失败了.
后决定重装.
执行 brew install node,提示如下:
Error: node 15.0.1 is already installed
To upgrade to 16.3.0, run:
brew upgrade node
按照提示,更新node,执行brew upgrade node后,出现一个报错,如下:
==> Installing node
==> Pouring node--16.3.0.catalina.bottle.tar.gz
Error: The `brew link` step did not complete successfully
The formula built, but is not symlinked into /usr/local
Could not symlink bin/node
Target /usr/local/bin/node
already exists. You may want to remove it:
rm '/usr/local/bin/node'
To force the link and overwrite all conflicting files:
brew link --overwrite node
To list all files that would be deleted:
brew link --overwrite --dry-run node
Possible conflicting files are:
/usr/local/bin/node
/usr/local/share/man/man1/node.1
/usr/local/lib/dtrace/node.d
于是在更新完成后,依次执行以下方法
//1.每个人的提示执行方法可能不同,按照自己的来
rm '/usr/local/bin/node'
//2.
brew link --overwrite --dry-run node
如果有提示override rwxr-xr-x root/wheel for /usr/local/bin/node?直接回车即可
处理完成后,重装一次brew reinstall node,打印如下:
lepu@Mac-mini ~ % brew reinstall node
==> Downloading https://ghcr.io/v2/homebrew/core/node/manifests/16.3.0
Already downloaded: /Users/lepu/Library/Caches/Homebrew/downloads/8cdf7bcce5c665efc3db3dedfc4e9fd9eda6b6e63f8cac136fdc380afcbe0f08--node-16.3.0.bottle_manifest.json
==> Downloading https://ghcr.io/v2/homebrew/core/node/blobs/sha256:fbfd0d5e00e92
Already downloaded: /Users/lepu/Library/Caches/Homebrew/downloads/dd34e7765093a1d7db84af95315076e62aee80ac94c847d2eb39628f842dbbd2--node--16.3.0.catalina.bottle.tar.gz
==> Reinstalling node
==> Pouring node--16.3.0.catalina.bottle.tar.gz
🍺 /usr/local/Cellar/node/16.3.0: 2,777 files, 49.3MB
lepu@Mac-mini ~ %
然后重装watchman:brew reinstall watchman
lepu@Mac-mini ~ % brew install watchman
Warning: watchman 2021.06.07.00 is already installed and up-to-date.
To reinstall 2021.06.07.00, run:
brew reinstall watchman
lepu@Mac-mini ~ % brew reinstall watchman
==> Downloading https://ghcr.io/v2/homebrew/core/watchman/manifests/2021.06.07.0
Already downloaded: /Users/lepu/Library/Caches/Homebrew/downloads/20c706ef1ce6dfda72bf2512d514765bbde725fdc31ab01cef8509b792eacef9--watchman-2021.06.07.00.bottle_manifest.json
==> Downloading https://ghcr.io/v2/homebrew/core/watchman/blobs/sha256:b7702260b
Already downloaded: /Users/lepu/Library/Caches/Homebrew/downloads/aad7800eb820e64d61794e5ca3b9762acac4ba884a2091ebca3a169f9283c109--watchman--2021.06.07.00.catalina.bottle.tar.gz
==> Reinstalling watchman
==> Pouring watchman--2021.06.07.00.catalina.bottle.tar.gz
🍺 /usr/local/Cellar/watchman/2021.06.07.00: 23 files, 5.1MB
lepu@Mac-mini ~ %
然后是cocoapods的安装:sudo gem install cocoapods
然后是重新创建项目:
lepu@Mac-mini ~ %
lepu@Mac-mini ~ % cd /Users/lepu/Desktop/RNDemo
lepu@Mac-mini RNDemo %
lepu@Mac-mini RNDemo %
lepu@Mac-mini RNDemo %
lepu@Mac-mini RNDemo %
lepu@Mac-mini RNDemo % npx react-native init AwesomeProject
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native!
Learn once, write anywhere
✔ Downloading template
✔ Copying template
✔ Processing template
✖ Installing CocoaPods dependencies (this may take a few minutes)
✖ Installing CocoaPods dependencies (this may take a few minutes)
error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: "cd ./AwesomeProject/ios && pod install".
CocoaPods documentation: https://cocoapods.org/
lepu@Mac-mini RNDemo % cd ./AwesomeProject/ios && pod install
报错提示需要运行cd ./AwesomeProject/ios && pod install进行pod更新
cd ./AwesomeProject/ios && pod install
从此用于网络的问题可能多次失败,失败后重新进行:pod install直到成功:
lepu@Mac-mini ios % pod install
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `RCT-Folly` from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
Downloading dependencies
Installing CocoaAsyncSocket (7.6.4)
Installing DoubleConversion (1.1.6)
Installing FBLazyVector (0.64.2)
Installing FBReactNativeSpec (0.64.2)
Installing Flipper (0.75.1)
Installing Flipper-DoubleConversion (1.1.7)
Installing Flipper-Folly (2.5.3)
Installing Flipper-Glog (0.3.6)
Installing Flipper-PeerTalk (0.0.4)
Installing Flipper-RSocket (1.3.1)
Installing FlipperKit (0.75.1)
Installing OpenSSL-Universal (1.1.180)
Installing RCT-Folly (2020.01.13.00)
Installing RCTRequired (0.64.2)
Installing RCTTypeSafety (0.64.2)
Installing React (0.64.2)
Installing React-Core (0.64.2)
Installing React-CoreModules (0.64.2)
Installing React-RCTActionSheet (0.64.2)
Installing React-RCTAnimation (0.64.2)
Installing React-RCTBlob (0.64.2)
Installing React-RCTImage (0.64.2)
Installing React-RCTLinking (0.64.2)
Installing React-RCTNetwork (0.64.2)
Installing React-RCTSettings (0.64.2)
Installing React-RCTText (0.64.2)
Installing React-RCTVibration (0.64.2)
Installing React-callinvoker (0.64.2)
Installing React-cxxreact (0.64.2)
Installing React-jsi (0.64.2)
Installing React-jsiexecutor (0.64.2)
Installing React-jsinspector (0.64.2)
Installing React-perflogger (0.64.2)
Installing React-runtimeexecutor (0.64.2)
Installing ReactCommon (0.64.2)
Installing Yoga (1.14.0)
Installing YogaKit (1.18.1)
Installing boost-for-react-native (1.63.0)
Installing glog (0.3.5)
Installing libevent (2.1.12)
Generating Pods project
Integrating client project
[!] Please close any current Xcode sessions and use `AwesomeProject.xcworkspace` for this project from now on.
Pod installation complete! There are 49 dependencies from the Podfile and 40 total pods installed.
[!] FBReactNativeSpec has added 1 script phase. Please inspect before executing a build. See `https://guides.cocoapods.org/syntax/podspec.html#script_phases` for more information.
[!] Your project does not explicitly specify the CocoaPods master specs repo. Since CDN is now used as the default, you may safely remove it from your repos directory via `pod repo remove master`. To suppress this warning please add `warn_for_unused_master_specs_repo => false` to your Podfile.
lepu@Mac-mini ios %
到此RN项目创建完成.
运行RN的iOS项目
直接找到文件下的ios目录,运行.xcworkspace文件即可,我选择的模拟器运行,运行成功会打开一个终端,并打开xcode,截图如下:
image.png
image.png
注:以上步骤没问题的情况下,终端会运行js代码
BUNDLE ./index.js LOG Running "AwesomeProject" with {"rootTag":1,"initialProps":{}}
在RN上运行xcode的原生代码
- 使用VSCode打开项目,创建一个新的App1.js文件,代码如下
import React from 'react';
import {View, Text, Button, NativeModules} from 'react-native';
var nativeModule = NativeModules.OpenNativeModule;
export default class HomeScreen extends React.Component {
render() {
return (
<View>
<Text>首页</Text>
<Button title={'跳转到原生页面'} onPress={() => {
this.jumpToNativeView();
}}/>
</View>
)
}
jumpToNativeView() {
nativeModule.openNativeVC();
}
}
- 修改index.js的代码为
import App from './App1';
3.保存后,通过xcode打开ios下的工程,新建一个类,具体如下:
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
NS_ASSUME_NONNULL_BEGIN
@interface OpenNativeModule : NSObject<RCTBridgeModule>
@end
NS_ASSUME_NONNULL_END
//
// OpenNativeModule.m
// AwesomeProject
//
// Created by LEPU on 2021/6/10.
//
#import "OpenNativeModule.h"
#import "AppDelegate.h"
#import "BLEViewController.h"
#import "CRBlueToothManager.h"
#import <React/RCTLog.h>
@implementation OpenNativeModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(openNativeVC) {
dispatch_async(dispatch_get_main_queue(), ^{
AppDelegate *delegate = (AppDelegate *)([UIApplication sharedApplication].delegate);
//BLEViewController这个就是iOS的原生VC
BLEViewController *nativeVC = [[BLEViewController alloc] init];
delegate.window.rootViewController = nativeVC;
[delegate.window makeKeyAndVisible];
});
}
@end
保存后运行项目,点击跳转到原生页面会进入到BLEViewController视图,完成调用.
