原生集成ReactNative

一.建立iOS项目.步骤略过不表.

 

二.加入ReactNative支持.

1.React Native部分

目录的构建方式有很多种,这里我选择在iOS目录下,建立ReactNative文件夹,之后所有的Rn文件,代码都会在此目录下.

在ReactNative文件夹下,建立package.json,此文件主要是做一些ReactNative文件的配置.代码如下.(*注意配置中的name必须为iOS项目名)　　

{
  "name": "NativeJoinReactNative",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "16.3.0",
    "react-native": "0.55.0"
  }
}

react的版本和react native的版本可在以下两个站点中查询

https://doc.react-china.org
https://reactnative.cn

编辑完成后,使用终端,进入该iOS项目的ReactNative下.执行以下命令,进行React Native的安装

npm install 

 安装后会下载相应的组件,全部在node_modules下.

 

2.iOS项目部分

在react native配置完后,需要针对iOS项目进行配置.主要是配置依赖等.

进入iOS目录下,建立podfile文件,内容如下.

target 'NativeJoinReactNative' do

  # 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
  pod 'React', :path => './ReactNative/node_modules/react-native', :subspecs => [
    'Core',             # 核心库
    'CxxBridge',        # RN版本高于0.45之后必须导入
    'DevSupport',       # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
    'ART',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTCameraRoll',
    'RCTGeolocation',
    'RCTImage',
    'RCTNetwork',
    'RCTPushNotification',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',     # 这个模块是用于调试功能的
    'RCTLinkingIOS' 
 ]
  # 如果你的RN版本 >= 0.42.0，请加入下面这行
  pod "yoga", :path => "./ReactNative/node_modules/react-native/ReactCommon/yoga"

end

 

还是一样,终端进入iOS目录,运行安装命令

pod install

之后,打开NativeJoinReactNative.xcworkspace,编译,该来的坑还是要来的.

提示[ 'folly/folly-config.h' file not found ],找到iOS项目目录下的ReactNative/node_modules/react-native/React.podspec,

在"React/Cxx*/*",下添加一行"React/Fabric/*",

https://github.com/facebook/react-native/issues/18683

之后执行一次pod install,再次编译就没问题了.

pod install

 

项目能编译后,继续对iOS项目进行设置.开启iOS项目对http的支持

打开info.plist,添加App Transport Security Settings属性.再添加Allow Arbitrary Loads,将bool属性设置为yes.

 

三.运行测试

到这基本上就可以开始编写React native代码了.由js编写一个index.ios.js

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

export default class ReactPage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          React Native 页面
        </Text>
        <Text style={styles.instructions}>
       模拟器中cmd+R刷新页面，cmd+D调出调试菜单
        </Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F2F2F2',
  },
  welcome: {
    fontSize: 24,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
 
AppRegistry.registerComponent('NativeJoinReactNative', () => ReactPage);

 

调用也很简单. 代码如下

//
//  ViewController.m
//  NativeJoinReactNative
//
//  Created by KayCM on 2018/8/8.
//  Copyright © 2018年 M1989. All rights reserved.
//

#import "ViewController.h"
#import <React/RCTRootView.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 100, 30)];
    
    btn.backgroundColor = [UIColor redColor];
    
    [self.view addSubview:btn];
    
    [btn addTarget:self action:@selector(goReactNativePage) forControlEvents:UIControlEventTouchUpInside];
    
}

-(void)goReactNativePage{
    
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"NativeJoinReactNative" initialProperties:nil launchOptions:nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
    
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

 

最后,在运行之前. 千万要记得,使用终端进入iOS目录下的ReactNative文件夹下.运行npm start命令,开启服务.

npm start 

 

四.最后

在集成的过程中也很有很多问题. 比如React native的某些组件的弃用以及替换.多注意google就好. 毕竟你现在在踩的坑,大多数别人以及踩过了.