爽爆天ReactNative基础篇 - 2.2 搭建iOS工程
开始本章之前,仍然不厌其烦地啰嗦几句,本章节基于苹果的mac OS X 系统,本系列教程的所有文章也都是基于此系统的,本人强烈建议使用mac进行开发。
本章概述(react-native下文有时会简称 rn):
- 【环境】我们一开始会先检查下需要安装与配置的环境是否OK。
- 【构建项目】然后我们会构建一个iOS项目,如果已有项目我们会调整下结构。
- 【安装iOS依赖库】为了建立iOS与react-native的连接,我们要在iOS项目中安装rn相关的依赖库。
- 【给iOS添加rn相关代码】给iOS项目添加 rn 代码,增加rn支持。
- 【给rn项目添加rn代码】给rn项目添加rn代码
- 【运行看效果】以本地服务和打包的形式看iOS应用最终效果。
1 本章示例代码
1 | https://github.com/luochenxun/react-native-happy-learn.git 分支名: chapter2.2 |
你可以这样拉下来:找个目录,然后敲
1 | git clone -b chapter2.2 https://github.com/luochenxun/react-native-happy-learn.git rnProject |
2 基础环境
2.1 安装 Xcode , cocopads
2.2 建立现有iOS项目(如果你已有iOS项目,此步聚可以跳过)
在硬盘上找个地方放置我们的工程,比如 rnDemo。
然后在里面分别创建 iOS,Android,rn三个目录,就像这样:
1 | rnDemo // 项目根目录 |
因为这节我们主要是建立iOS工程,所以我们使用Xcode,新建一个工程到iOS目录中。
1 | 进入Xcode,在 File -> new project... -> Single view application |
创建成功后会在iOS目录中多出一个以项目名称为命名的项目目录。把目录中的文件都挪到上层iOS目录中。使iOS目录为项目的根目录。
2.3 安装 react-native
使用命令行进入 rn 目录,运行 npm init
根据系统问的关于项目的问题回答之,便建立好了一个nodeJS项目,可以看到目录里多了一个package.json文件。
然后执行
1 | npm install -s react |
关于nodeJS的内容,可以参考后面关于NodeJS的介绍。这里你只要知道一个react-native工程,其实就是一个NodeJS工程。NodeJS是JavaScript的运行时环境,提供JS的本地编译运行与打包等功能。而npm提供了NodeJS的依赖库管理,这就体现在package.json文件中,这个json文件记录了本NodeJS项目的信息,依赖库信息等。
我们看看最后生成的两个文件 package.json & node_modules
- node_modules
node_modules是 NodeJS放依赖库的地方,我们下下来的 react-native库及他所依赖的库都放在 node_modules里面。每个库就是一个module,放在一个独立的文件夹里面。
- package.json
这个上面介绍过了。 我们修改下pakcage.json让他变成这样(正式使用时,注释要去掉):
1 | { |
其实有了这个package.json文件后,我们他日要升级 react-native 或是要添加其它库时,只要添加或修改到 dependencies内,然后把node_modules删之,最后在根目录直接运行 npm install
就行,npm会根据package.json中的依赖库信息,安装项目所有需要的依赖库。
3 安装iOS依赖库
我们使用 cocoapods 来安装。
cocoapods 是iOS的依赖库管理工具,就像 npm之于NodeJS一样,它可以让我们非常方便地安装iOS项目需要使用到的第三方库。
首先进入iOS项目,执行
1 | pod init # 初始化cocoapods,主要是创建一个Podfile,这个文件如同 package.json,是cocoapods的依赖库配置文件 |
然后我们修改生成的 Podfile,使之像下面一样(同样,注释只是我为了说明,不用复制到项目中):
1 | target 'rnDemo' do # target为你这个iOS项目的名称,如果是新建的项目,就是你new project时输入的名称 |
1 下面这部分是重点,它指定了依赖的本地 react-native库路径,和所依赖的子库,安装时,它会到这个目录中找所需要的文件。 pod ‘React’, :path => ‘../rn/node_modules/react-native’, :subspecs => [
1
2
3
4
5'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',2 Add any other subspecs you want to use in your project ]
end
最后在iOS项目根目录执行 pod install
会在本地生成一个 rnDemo.xcworkspace
文件,执行它,就可以打开iOS工程了。
4 给iOS添加rn相关代码
4.1 添加 ReactView
将我们示例代码中的 ReactView文件夹拖入项目,ReactView是一个封装了加载rn模块的View
主要代码:
1 | /*! |
修改项目中的 ViewController.m,添加代码加载rn模块,并将 加载成功后的 ReactView装进 ViewController中:
1 | - (void)viewDidLoad { |
4.2 添加 rn 相关代码
在rn目录,新建 index.ios.js 文件,输入内容:
1 | import React, { Component } from 'react'; |
5 启动rn
在终端进入rn目录,输入 npm start
开启本地服务
在Xcode中运行项目, 按 cmd+r 刷新,就可以看到我们的欢迎界面啦~ 至此,将rn集成入iOS项目便OK了。保存这个项目后续我们用rn开发就可以不写一句iOS代码,构建iOS应用了!!
6 将RN打包成jsbundle
当我们应用想运行在手机上,或者是不想用本地服务时,我们可以将rn打成包装进app,只要运行下面的打包命令就OK了。
打包命令
1 | react-native bundle --minify --entry-file ./index.ios.js --bundle-output ./main.jsbundle --platform ios |
–minify 压缩
–entry-file 入口JS
–bundle-output 输入生成的JSbundle
–platform 平台
运行完命令后,本地会生成 main.jsbundle,将它拖入Xcode项目,对 ReactView作些修改:
1 | 将生成 jsCodeLocation 的那一句改成这样: |
然后运行项目,就可以不需要本地服务器运行iOS rn项目了~~ :)
7 本章示例代码
1 | https://github.com/luochenxun/react-native-happy-learn.git 分支名: chapter2.2 |
你可以这样拉下来:找个目录,然后敲
1 | git clone -b chapter2.2 https://github.com/luochenxun/react-native-happy-learn.git rnProject |