rn源码ios_RN - IOS 原生嵌套RN

朴灿烈づ我的快乐病毒、 2022-12-31 10:28 216阅读 0赞

配置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项目

![Image 1][]

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

跳转代码

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

项目文件结构

![Image 1][]

A166982149D291149DB47C510C5D8EA7.png

![Image 1][]

7F8444679252553C188E426D72B0EACF.png

[Image 1]:

rn源码ios_RN - IOS 原生嵌套RN

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 RN-ScrollView

相关 rn 环境

相关 rn源码ios_RN - IOS 原生嵌套RN

相关 H5如何与原生App(ios,安卓,RN)通信？

相关 RN动画

相关封装IOS原生组件——导出组件事件到RN端使用

相关封装IOS原生组件——导出到RN端使用

相关 rn 样式

相关 rn 事件

相关 rn 嵌套网页webView