iOS 原生与ReactNative 混合开发之项目搭建

这里介绍下,如何再原生项目里嵌入ReactNative控件

操作之前,你的电脑上要装有以下:

• xcode

• cocoapods

• ReactNative相关组件,及其环境配置

1.首先是创建一个OC项目,如果你已有项目可跳过这个步骤,直接再文件根目录下操作

目录结构.png

2.由于本人是做iOS 开发的,因此只在iOS项目的基础上进行配置,再文件根目录下,创建一个文件夹,用于存放js文件和相关配置文件,为了方便理解,我对文件结构进行调整

调整后.png

3.接下来,打开终端

cd 根目录

touch package.json

open package.json

文件内容.png

react-native对react的版本有严格要求，高于或低于某个范围都不可以dependencies中的react和react-native的版本取决于你的具体需求你可以使用npm info react和npm info react-native来查看当前的最新版本

{

  "name": “ReactNativeDemo”,

  "version": "0.0.1",

  "private": true,

  "scripts": {

    "start": "node node_modules/react-native/local-cli/cli.js start"

  },

  "dependencies": {

    "react": "15.4.1",

    "react-native": "0.39.2"

  }

}

npm install

导入配置文件.png

4.使用cocoapods添加ReactNative组件

Podfile.png

pod init

# target的名字一般与你的项目名字相同
target 'ReactNativeDemo' do 
# 'node_modules'目录一般位于根目录中 
# 但是如果你的结构不同，那你就要根据实际路径修改下面`:path` 
pod 'React', :path => '../node_modules/react-native', :subspecs => [
      'Core', 
      'RCTText',
     'RCTNetwork',
     'RCTWebSocket', 
# 这个模块是用于调试功能的 # 在这里继续添加你所需要的模块 ]
end

pod install

图.png

5.创建js文件

cd 根目录

touch index.ios.js

在js文件中,编写你的控件(这是中文网上摘取的,你们可以编写自己的js)

'use strict';

import React from 'react';

import {

  AppRegistry,

  StyleSheet,

  Text,

  View

} from 'react-native';

class RNHighScores extends React.Component {

  render() {

    var contents = this.props["scores"].map(

      score => {score.name}:{score.value}{"\n"}

    );

    return (

      

        

          2048 High Scores!

        

            

          {contents}

        

      

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#FFFFFF',

  },

  highScoresTitle: {

    fontSize: 20,

    textAlign: 'center',

    margin: 10,

  },

  scores: {

    textAlign: 'center',

    color: '#333333',

    marginBottom: 5,

  },

});

// 整体js模块的名称

AppRegistry.registerComponent('ReactNativeDemo', () => RNHighScores);    // 这句要注意两个名字,第一个名字是项目的名字,第二个名字是上面控件的名字

图.png

6.接下来就是打开项目,编写OC部分

目录.png

在项目中导入:

导入.png

可能会报错,说文件找不到

那么需要做如下操作:

报错.png

项目中添加的代码.png

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    // Override point for customization after application launch.    NSURL *jsCodeLocation = [NSURL                             URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];    RCTRootView *rootView =    [[RCTRootView alloc] initWithBundleURL : jsCodeLocation                         moduleName        : @"ReactNativeDemo"                         initialProperties :     @{       @"scores" : @[               @{                   @"name" : @"Alex",                   @"value": @"42"                   },               @{                   @"name" : @"Joel",                   @"value": @"10"                   }               ]       }                          launchOptions    : launchOptions];    UIViewController *vc = [[UIViewController alloc] init];    rootView.frame = [UIScreen mainScreen].bounds;    [vc.view addSubview:rootView];    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];    self.window.rootViewController = vc;    [self.window makeKeyAndVisible];    return YES;}

6.到这一步还没有结束,你需要开启服务器

cd 根目录

// 开启本地服务器

npm start

然后就可以运行项目:或者如果你可以的话,终端输入下面的命令,如果你是按着上面的步骤搭建的项目,下面的命令是走不通的,具体原因,自己去百度

react-native run-iso

下面的黄色文字,意思是说,如果你把项目调成release模式,会加载的更快,也就是关闭debug模式

图.png

网络请求:

        NSAppTransportSecurityNSAllowsArbitraryLoads

也许你会发现,在加载rn的时候,顶部会出现load from...类似的加载进度条,这个不必担心,relase(上线模式下)提示不显示的