iOS原生项目调用React Native组件

u=1435487395,1753778452&fm=23&gp=0.jpg

一. 利用iOS开发工具Xcode 创建一个空项目;

二. 添加React-Native 依赖包

React Native的植入过程同时需要React和React Native两个node依赖包。

1.1新建package.json,在自己刚创建的空项目的根目录下创建一个package.json的文件，用于初始化React-Native;

在根目录下运行如下命名：

$ touch package.json

1.2打开package.json把以下代码块添加进去，把"name"改成你自己项目的名称；

{
  "name": "iOS_RN",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.4.2",
    "react-native": "0.41.2"
  }
}

其中，"dependencies"中的 "react"和"react-native"版本的部分取决于你的具体需求，一般来说我们推荐使用最新版本。你可以使用npm info react和npm info react-native来查看当前的最新版本。另外，react-native对react的版本有严格要求，高于或低于某个范围都不可以。本文无法在这里列出所有react native和对应的react版本要求，只能提醒读者先尝试执行npm install，然后注意观察安装过程中的报错信息，

1.3安装依赖包

使用npm（node包管理器，Node package manager）来安装React和React Native模块。这些模块会被安装到项目根目录下的node_modules/目录中。在包含有package.json文件的目录（一般也就是项目根目录）中运行下列命令来安装：

 $ npm install

三. Cocoapods集成React Native.

1.若原项目无使用Cocoapods，则在根目录下创建Podfile(已使用的略过);

 $ touch Podfile

2在Podfile文件中添加如下代码。如果有则直接在Podfile里面添加如下代码

 $ open -e Podfile

platform:ios, '8.0'

target ‘iOS_RN’ do

pod 'React', :path => './node_modules/react-native', :subspecs => [
 # 你的工程如何组织，你的node_modules文件夹可能会在别的地方。
   # 请将:path后面的内容修改为正确的路径（一定要确保正确～～）。
   'Core',
   'RCTNetwork’,
   'RCTWebSocket',
   'ART',
   'RCTActionSheet',
   'RCTAdSupport',
   'RCTGeolocation',
   'RCTImage',
   'RCTPushNotification',
   'RCTSettings',
   'RCTText',
   'RCTVibration',
   'RCTLinkingIOS',
    ]
#这里是你自己以前的一些三方库，比如AFNetworking
pod 'AFNetworking'
 
end

保存,运行:

$ pod install

四. 添加index.ios.js文件.

在根目录下创建index.ios.js
$ touch index.ios.js

创建成功之后，根目录下会有index.ios.js文件，打开文件在里面添加如下代码，保存

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class iOS_RN extends Component {
  render() {
    return (
        
        
          Welcome to React Native!
        
        
         I'm from iOS_ Native
         iOS调用React- native
        
        
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('iOS_RN', () => iOS_RN);
注意：将类名和注册组件名称替换为自己的项目名称；

五. 在原生app添加RN入口

self.navigationItem.title = @"这个是RN页面";  
   NSURL *jsCodeLocation;
   jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"iOS_RN"
                                                initialProperties:nil
                                                    launchOptions:nil];
   //注意，这里是 @"RNInsetIOSDemo"
   rootView.frame = CGRectMake(0, 0, 375, 667);
   rootView.backgroundColor = [UIColor blueColor];
   [self.view addSubview:rootView];   

注意:  moduleName 为你的项目名称,注意替换。

六.注意Xcode 项目中的ATS网络请求权限设置，设置info.Plist文件NSAppTransportSecurity属性，以此支持http

 NSAppTransportSecurity
  
      NSAllowsArbitraryLoads
      
      NSExceptionDomains
      
          localhost
          
              NSTemporaryExceptionAllowsInsecureHTTPLoads

七.启动开发服务器

在项目的根目录下运行如下命名:

$ nam start

最后，打开项目运行，跳转就能见到神秘的Recat 的页面了；

644F9234-3208-4787-8833-9FFBE3E4EA69.png