现有ios原生app集成rn

北鸟南游
1,150 阅读3分钟

一些app最初是采用原生IOS开发的，如果后边需要新增一些功能是使用RN开发，那么怎么把开发的rn功能需求给集成到原生ios中呢？

官方指导文档，给出了操作说明。但是对于新手小白来说，官方的文档写的过于跳跃，好几个步骤不知道怎么往下操作。

接下来就结合官方文档进行详解；

下载原生ios并成功运行

本示例原生的app是oc开发的ios程序。下载地址

下载完成，打开 NumberTileGame 目录，该目录为原生ios的源代码。

image.png

在xcode中打开项目，

image.png

启动项目，结果如下

image.png

点击play game可以弹出游戏界面

image.png

创建rn测试项目

使用命令创建rn项目


npx react-native init AwesomeProject

项目创建成功，通过npm run start进行启动。

修改App.jsx的内容如下：

import React, {Component, useState} from 'react';
import {
  StyleSheet,
  View,
  StatusBar,
  Dimensions,
  Switch,
  Text,
} from 'react-native';

export default App = () => {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
  return (
    <View style={style.container}>
      <Text>只是rn的测试文件</Text>
      <StatusBar hidden={isEnabled} />
      <Switch
        trackColor={{false: 'red', true: 'blue'}}
        thumbColor={'orange'}
        ios_backgroundColor="#ff3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
};

const style = StyleSheet.create({
  container: {
    flex: 1,
    // StatusBar 状态条
    marginTop: StatusBar.currentHeight,
    marginHorizontal: 16,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 30,
    fontWeight: 'bold',
  },
  butn: {
    width: Dimensions.get('window').width - 20,
    backgroundColor: 'blue',
    height: 40,
    color: 'red',
  },
});

运行后如下图

image.png

到这一步，rn的项目开发完成。

生成bundle文件

测试环境

执行命令 npm run ios生成开发环境的bundle文件。

产生的bundle会在http://localhost:8081/index.bundle路径下进行访问。

生产环境

需要通过命令将文件打包，然后将打包的内容上传到服务器中，以替换http://localhost:8081/index.bundle?platform=ios地址。

打包的命令

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/index.bundle --assets-dest ios

以上操作完成了原生IOS的运行，以及rn项目的创建。接下来在原生ios添加一个按钮组件，通过点击按钮可以弹出rn的内容。

主要原理：在原生应用中添加一个RCTRootView。这个RCTRootView正是用来承载你的 React Native 组件的容器。

在xcode中添加组件

添加组件

image.png

打开视图，接下来开始往视图添加组件。

image.png

拖动组件放入到view视图，就完成了添加组件。

image.png

选择button组件，可以在右侧修改属性

image.png

在viewController中关联组件和事件

安装原生ios对rn的支持依赖包，在Podfile中添加如下配置


def share_pods

  # rn 组件库
  pod 'React', :path => '../node_modules/react-native', :subspaces =>[
    'Core',
    'BatchedBridge',
    'DevSupport',
    'ART',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTImage',
    'RCTNetwork',
    'RCTText',
    'RCTWebSocket',
    'RCTLinkingIOS',
  ]
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

end

点击关联事件

首先，在F3HViewController文件中新增highScoreButtonPressed函数


#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>


  


- (IBAction)highScoreButtonPressed:(id)sender {

    NSLog(@"High Score Button Pressed");

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

    RCTRootView *rootView =
        [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
       moduleName: @"AwesomeProject"
       initialProperties:
       @{
           @"scores" : @[
               @{
                   @"name" : @"Alex",
                   @"value": @"42"
                   },
               @{
                   @"name" : @"Joel",
                   @"value": @"10"
                   }
           ]
}

       launchOptions: nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
}
  
@end

然后在视图中进行操作

image.png

选择controller文件，就能打开代码的编辑。

选择被操作的按钮，进行拖动关联。

image.png

之后选择按钮，右键点击也可以看到关联的内容

image.png

该事件就是通过RCTRootView进行渲染的rn项目。

avatar
文章
阅读
粉丝