rn基础教程

基础环境

• 安装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地址: [email protected]: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