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加载就不难理解了。
