rn源码ios_RN - IOS 原生嵌套RN

配置RN 文件

新建文件加 (项目名称)

在项目根目录下创建一个名为package.json

{

"name": "项目名字",

"version": "0.0.1",

"private": true,

"scripts": {

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

}

}

cd到目录

yarn add react-native

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

查看有类似这句话的 需要滚动到上面。指定版本 高了或者低了都不可以。

yarn add react@16.2.0

根目录下创建 index.js App.js app.json

app.json 文件

{

"name": "HelloIos",

"displayName": "HelloIos"

}

index.js 文件

import {AppRegistry} from 'react-native';

import App from './App';

import {name as appName} from './app.json';

AppRegistry.registerComponent(appName,() => App);

App.js 文件

import React, {Component} from 'react';

import {Platform,

StyleSheet,

Text,

View,

} from 'react-native';

export default class LPW extends Component{

render(){

return (

Hello World

);

}

}

RN 文件已经配置好了

IOS 配置

在项目的根目录创建 ios 文件 利用xcode 创建IOS项目

336AA930-23C4-4D7E-B7A9-A88600AB7780.png

配置项目 cocoapod cd到项目的ios文件夹

vim PodFile

把下面内容负责到里面 ./是当前目录 ../是父级目录 /是根目录

# target的名字一般与你的项目名字相同

target '项目名字' 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

复制完需要

pod install

导入头文件

#import

#import

#import

跳转代码

NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios&dev=true"];

RCTRootView *rootView =

[[RCTRootView alloc] initWithBundleURL: jsCodeLocation

moduleName: @"HelloIos"

initialProperties:nil

launchOptions: nil];

UIViewController *vc = [[UIViewController alloc] init];

vc.view = rootView;

[self.navigationController pushViewController:vc animated:YES];

注意2点：

RN服务器必须开启：

cd 到根目录 npm start

xcode默认不支持 HTTP 需要在info.plist下增加以下配置

NSAppTransportSecurity

NSExceptionDomains

localhost

NSTemporaryExceptionAllowsInsecureHTTPLoads

命令行运行ios项目 react-native run-ios

关闭RN服务器 运行命令 killall -9 node

开启服务器 运行命令 npm start

项目文件结构

A166982149D291149DB47C510C5D8EA7.png

7F8444679252553C188E426D72B0EACF.png