RN集成到现有项目中

preivew

本片文章主要适用于iOS开发者。

安装环境

1、node.js

brew install node
brew install watchman

2、npm换源

中国站明确提醒，切勿用cnpm

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

3、可选择的安装yarn

npm install -g yarn react-native-cli

4、yarn换源

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

5、yarn和npm简单区别

yarn add xxx,npm install xxx

6、安装xcode以及comman line tools，作为iOS开发的同学这个如果不会，建议放弃程序员职业

7、在集成到现有iOS项目之前，先跑通一遍由RN脚手架创建的独立工程。

#用react-native工具创建helloword项目
react-native init AwesomeProject --version 0.55.4
#进入工程目录
cd AwesomeProject
#安装npm依赖，这个过程可能会很漫长，有一些库很大，建议科学上网。
npm install
#起服务，这个命令会唤起iOS模拟器
react-native run-ios
#作为iOS开发者，你也可以这样
npm start
#然后打开iOS工程，用xcode编译运行

官网也给出了链接解决

国内上网难，解决办法

8、不出意外，应该会正常展示一个helloword页面，当然也会有意外，遇到意外可以留言，会给与解答。

集成现有iOS项目

1、在项目根目录创建文件名为：package.json的文件,start是启动服务命令，即npm start，bundle-ios是打包命令，即npm bundle-ios会在./ios/bundle目录下面生产js，这个js会在后面的didFinishLaunchingWithOptions中使用，前提是你得有这个./ios/bundle目录。

2、内容如下

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "bundle-ios": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js  --platform ios --dev false --bundle-output ./ios/bundle/index.jsbundle --assets-dest ./ios/bundle",

  }
}

3、命令行cd到package.json所在的文件夹，安装npm依赖

yarn add react-native@0.55.4
#亲测，其他很多版本有问题，会导致iOS工程编译不通过，或者编译通过运行crash

4、这时候可能会提示，缺少依赖包，咱们一个一个安装

warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".

会有类似的warnings提示，不可忽略，依葫芦画瓢，如果是如上提示，那么
yarn add react@16.2.0
知道warnings消失

5、安装cocoaPods，如果你没有，作为iOS开发的同学，建议放弃程序员职业

6、怎么安装、初始化pod不累赘

target 'NumberTileGame' do
  # 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # 如果RN版本 >= 0.47则加入此行
    'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 调试功能需要此模块
    'RCTAnimation', # FlatList和原生动画功能需要此模块
    # 在这里继续添加你所需要的其他RN模块
  ]
  # 如果你的RN版本 >= 0.42.0，则加入下面这行
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  # 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

end

Podfile里面，可以看到很多pod都是依赖于本地路径的，要确保这些路径能真实访问到

7、pod install

这个过程漫长，很漫长，请科学上网，发现失败不要放弃，继续重试

8、到这里从开发环境角度已经搭建完成了，咱们就写一个RN页面，名字叫index.js，同样放到根目录下去

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

// type Props = {};
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hello : 'Hello Suning'
    };
  }
  render() {
    let title = this.state.hello;
    return (
      <Text style={styles.text}>{title}</Text>
    );
  }
}
const styles = StyleSheet.create({
  
  text: {
    width: 100,
    height: 100,
    fontWeight: 'bold',
    backgroundColor: '#8ab9c2',
    flex: 1,
    color: 'red'
  }
});

9、iOS集成RN，配置初始化代码

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    //第一种方式：系统API
//    NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
    //第二种方式，制定url
        NSURL *jsCodeLocation = [NSURL URLWithString:@"http://127.0.0.1:8081/index.bundle?platform=ios"];
//    第三种方式 npm run bundle-ios
//    NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index" withExtension:@"jsbundle"];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"SMINIP"
                                                 initialProperties:nil
                                                     launchOptions:launchOptions];
    rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
    
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    UIViewController *rootViewController = [UIViewController new];
    rootViewController.view = rootView;
    self.window.rootViewController = rootViewController;
    [self.window makeKeyAndVisible];
    
    return YES;
}

验证url是否可用

浏览器打开此链接，如果看到的是一大坨js，那就对了。再次过程中，请确保npm start了。

10、三种方式说明，

第一种，系统的api，应该RN会自动找服务中的index页面

第二种，指定url

第三种，指定js文件，

大家可能会疑惑，为什么要npm start起一个服务？是因为我们【8】中写的那个index.js是不能直接运行的，需要

链接很多js库，打包一起才能运行。所以这个服务就是起到这个作用，你把从服务中获取url，换成第三种方式-使用js文件作为RN加载就不难理解了。