通常情况下我们有两种方式来构建一个使用RN技术的应用:
- RN包原生。应用入口由RN控制,页面跳转逻辑也由RN主导,当涉及做原生增强时使用RN的API构建一些原生的模块并暴露出来给RN调用。
- 原生包RN。应用入口由原生代码控制,页面跳转逻辑由原生主导。某些跨平台业务逻辑页面由RN开发。充分利用RN的跨平台特性,较少原生开发的巨大成本。
当采用第二种方式时就需要在原生应用中嵌入RN页面。现在就手把手的教大家如何操作。为方便大家理解,我们从一个全新创建的Objective C项目出发。
第一步,创建一个OC原生项目。
在XCode中快速地创建一个OC single view 项目。
第二步,添加RN需要的npm依赖项目。
和其他js项目一样,添加RN的npm 依赖首先需要在项目的根目录下创建一个package.json文件。二话不说,直接在项目根目录下新建package.json,然后拷入以下代码:
{ "name": "EmbedRN","version": "0.0.1","private": true,"scripts": { "start": "node node_modules/react-native/local-cli/cli.js start","test": "jest" },"dependencies": { "react": "~15.4.0-rc.4","react-native": "0.38.0" },"devDependencies": { "babel-jest": "21.0.0","babel-preset-react-native": "3.0.2","jest": "21.0.1","jest-react-native": "18.0.0","prop-types": "^15.5.10","react-test-renderer": "~15.4.0-rc.4" },"jest": { "preset": "react-native" } }
React和RN的版本根据自己的需要进行设定,但要注意二者版本匹配。如果不确定可以自己先react-native init一个项目看一下版本号。
接下来,熟悉得不能再熟悉的动作了: npm install。
安装完成后我们在项目的根目录下就多了一个子目录node_modules/。亲切吧。
第三步,安装cocopod依赖项。
使用cocodpod可以快速帮助我们添加React Native依赖项到原生项目里去。首先在项目根目录下新建Podfile(通过执行pod init),这是cocopod的依赖项目录。
拷入以下内容:
target 'EmbedRN' do # 'node_modules'目录一般位于根目录中 # 但是如果你的结构不同,那你就要根据实际路径修改下面的`:path` pod 'React',:path => './node_modules/react-native',:subspecs => [ 'Core','RCTText','RCTNetwork','RCTWebSocket',# 这个模块是用于调试功能的 # 在这里继续添加你所需要的模块 ] end
依赖的库名是React,根据项目的需要添加不同的subspecs进来。如要使用Text那么加进来RCTText,Image就加RCTImage等等。可用的subspecs列表可以查阅node_modules/react-native/React.podspec文件。
好了,有了node_modules和Podfile,接下来运行命令:
pod install
Pod项目依赖安装成功。关闭当前xcode session,从此以后我们就使用.xcworkspace来打开我们的项目了。
第四步,编写RN页面
新建RN入口页面:index.ios.js。至于这里的文件名是否一定必须是index.ios.js,回答是否定的。你可以使用任意的文件名,只要后面在oc代码中指定同样的文件名就可以了。
比如你想使用business2.js做文件名,没问题,在后面的oc代码中指定好jsCodeLocation地址就可以了。这样就可以保证原生应用按照不同的业务场景嵌入不同的RN页面。
import React,{ Component } from 'react'; import { AppRegistry,Text,View,} from 'react-native'; export default class Page1 extends Component { render() { return ( <View style={{ flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF'}}> <Text> Welcome to React Native! </Text> <Text> To get started,edit index.ios.js </Text> <Text> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> ); } } AppRegistry.registerComponent('Page1',() => Page1);
第五步,原生页面调用RN页面
在ViewController.m中添加如图代码。 RCTRootView就是终极大法了。
第六步,运行
首先打开RN的package server:
npm start -- --reset-cache
然后xcode中运行项目。大功告成。