基础环境
- 安装
node. - 安装react-native命令行工具
npm install -g yarn react-native-cli - 安装watchman,
brew install watchman
Homebrew 安装/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" - 创建react-native项目
react-native init 项目名
详细教程可以看:https://reactnative.cn
react-native App
demo地址: https://github.com/Wei-Li-19/EcarxReactNative/tree/master
原生应用集成react-native
阿里云demo地址: git@code.aliyun.com:ecarx-rn/rn-base-project.git
原生集成比较简单的方式是使用cocoaPods集成
cocoa使用教程:
https://www.jianshu.com/p/86f48382a978
1.检查ruby : gem sources –l
2..如果不是国内的源:
1>.移除默认的ruby源: sudo gem sources -r https://rubygems.org/
2>设置新的源 : sudo gem sources -a https://ruby.taobao.org/
3 如果ruby源是国内的话就直接安装: sudo gem install cocoapods
4.第一次使用cocoapods的 时候需要设置cocoa pods环境: pod setup 可能会等很久
使用cocoa pods管理第三方框架
1.在xxx.xcodeproj文件所在的目录,创建Podfile : pod init
2.管理Podfile 使用Xcode打开
2.1 设置支持的最低版本: platform :ios, '8.0'
2.2 如果使用的swift 需要使用framework的形式来使用第三方框架 添加: use_frameworks!,OC就不需要
2.3 导入第三方框架: pod ‘框架名称’ (注意使用单引号)
3.pod search 查找第三方框架
4.pod install 安装已经导入的第三方框架 第一次安装时 需要使用这个命令 以后都使用 pod update
5.如果网络比较慢 可以使用 pod install —-help 去查找 pod install --no-repo-update来快速安装(不会去获取最新的第三方框架版本) 如果已经安装过的第三方框架 在没有网络的情况下也可以安装
cocoapods 升级到最新版:
sudo gem install -n /usr/local/bin cocoapods
- 集成RN Podfile文件内容
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'reactNativeTest' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
use_frameworks!
# Pods for reactNativeTest
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.45则加入此行
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTLinkingIOS',
'RCTImage',
'RCTAnimation',
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的RN模块
]
# 如果你的RN版本 >= 0.42.0，则加入下面这行
pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
# 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'GLog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
end
