ReactNative手动嵌入现有iOS项目(第N篇)

最新推荐文章于 2024-08-19 11:42:48 发布

Justice-Lai

最新推荐文章于 2024-08-19 11:42:48 发布

阅读量1.4k

点赞数

分类专栏： ReactNative

本文链接：https://blog.youkuaiyun.com/s611533106/article/details/53759034

版权

ReactNative 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在已有iOS项目中手动集成ReactNative，包括创建新项目、添加必要的文件和库、修改配置，以及解决HTTP访问限制等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发前必须要的有(1和2)

1.Mac操作系统

2.成功运行过ReactNative项目的

3.创建名为ReactNativeIOS的iOS项目工程

4.在工程对应目录下创建文件夹RNLibrary(名字可以随意,用来存放ReactNative的组件),如下图把对应的文件复制进去

5.打开文件修改index.ios.js文件(对应的类名字要修改成iOS项目名称)

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} from 'react-native';
export default class ReactNativeIOS extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>This is a simple application.</Text>
            </View>
        );
    }

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexWrap: 'wrap',
        flexDirection: 'row',
        alignItems:'center', flexDirection: 'column',
        justifyContent: 'center',
    },
});
AppRegistry.registerComponent('ReactNativeIOS', () => ReactNativeIOS);

6.packge.json修改文件里面的name:''ReactNativeIOS,其他都不变,如果你的版本和其他信息都没修改

{
    "name": "ReactNativeIOS",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
     "react": "15.3.2",
     "react-native": "0.37.0"
  }
}

7.打开ReactNativeIOS项目,右键New Group----我取了项目名称ReactNativeIOS(名字可随意)

8.然后点击ReactNativeIOS文件夹,右键Add Files to ReactNativeIOS...(例如我要增加RCTActionSheet.xcodeproj)

其中一个目录不一样`.........react-native/React/React.xcodeproj`

其他目录都是一样..............react-native/Libraries/ActionSheet./RCTActionSheet.xcodepro`

9.然后在增加需要用到常用的例如下图(根据自己需要增加不同)

10.添加相关frameworks文件接下来要将相关的frameworks文件添加到工程中， ReactnativeIOS -> TARGETS -> ReactnativeIOS -> Build Phases -> Link Binary Width Libraries

11.JavaScriptCore.framework。libstdc++.tbd也需要加入

12.添加搜索头文件的地址 ReactnativeIOS -> TARGETS -> ReactnativeIOS -> Build Settings -> Header Search Paths ，添加一条 $(SRCROOT)/RNLibrary/node_modules/react-native/React ，选择 recursive 。

，

13.在Build Settings下输入Other Linker Flags 增加-ObjC

14.iOS9以上Http无法直接访问,所以要在info.plist下开启功能http

<key>NSAppTransportSecurity</key>  
<dict>  
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

15.创建一个UIView,名字随意如下图

#import "ReactView.h"
#import <RCTRootView.h>
#import "RCTBundleURLProvider.h"

@implementation ReactView
- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        NSURL *jsCodeLocation;
        jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
        //        jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
        RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                            moduleName:@"ReactNativeIOS"
                                                     initialProperties:nil
                                                         launchOptions:nil];      
        [self addSubview:rootView];
        rootView.frame = self.bounds;
    }
    return self;
}
@end

16.在控制器执行代码

#import "RNViewController.h"
#import "ReactView.h"

@interface RNViewController ()

@end

@implementation RNViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    
    ReactView * reactView = [[ReactView alloc] initWithFrame:CGRectMake(0, 40, CGRectGetWidth(self.view.bounds), 100)];
    [self.view addSubview:reactView];
}


@end