在React Native中集成iOS组件

1bqhqjot  于 2023-02-19  发布在  React
关注(0)|答案(4)|浏览(146)

我是React Native开发的新手,我知道iOS。只是想了解几点:
1.我们能否在React原生应用程序中添加iOS(swift或objective C)代码?
1.我们可以将React原生视图添加到现有iOS应用程序中吗?
我已经在谷歌上搜索了一下,得到了指向第二个的例子,这是很有可能的,Instagram在编辑个人资料屏幕上做到了。
但是我找不到它是一个React Native应用程序的例子,我们在两者之间引入了swift或Objective-C代码。
请如果任何人知道任何链接或例子可用于案件1,请让我知道它。
第2个问题:

  • 当我们将react native与iOS集成时,需要通过一个桥梁。假设我在Swift中创建了一个应用程序,要在其中获得react native视图,我们必须通过2个桥梁,一个将Swift转换为Objective-C,然后在Objective-C和React Native之间建立桥梁。对吗?如果是,它会和本机应用程序一样快吗?
nbysray5

nbysray52#

我们能否在React原生应用程序中添加iOS(swift或objective C)代码
是的,我能做到:
1.我创建了一个React Native项目,编译它并在模拟器中运行它。
1.转到项目目录结构中的iOS文件夹,并在xcode中打开.xcodeproj。
1.创建一个目标c文件(MyObjcClass),并创建您想要在React中使用的函数。
MyObjcClass.h

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface MyObjcClass : NSObject <RCTBridgeModule>

@end

我的对象类.m

#import "MyObjcClass.h"

@implementation MyObjcClass

// tells react bridge to bridge our created class
RCT_EXPORT_MODULE()

- (NSDictionary *)constantsToExport {
  return @{@"CreatedBy": @"Type any number and get Square"};
}

RCT_EXPORT_METHOD(squareNumber:(int)number getCallback:(RCTResponseSenderBlock)callback) {
  callback(@[[NSNull null], [NSNumber numberWithInt:(number*number)]]);
}

现在我们可以在JS中调用这些方法了。下面我将展示如何在React中调用objective c。
App.js

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

// to import native code
import {NativeModules} from 'react-native';

var MyObjcClass = NativeModules.MyObjcClass;

export default class App extends React.Component {

  state = {
    number:0
  };

  squareMe(num) {
    if (num == '') {
      return;
    }

    MyObjcClass.squareNumber(parseInt(num), (error, number) => {
      if (error) {
        console.error(error);
      } else {
        this.setState({number: number});
      }
    })
  }

  render() {

    return (
      <View style={styles.container}>
        <Text style={styles.spaceBetween}>Objective C inclusion</Text>
        <TextInput placeholder="type a number ...." style={styles.input} onChangeText={(text) => this.squareMe(text)}/>
        <ListItem placeName={this.state.number}></ListItem>
      </View>
      );
  }
}
sxpgvts3

sxpgvts33#

是的,我们可以做

import {Platform} from 'react-native';

const majorVersionIOS = parseInt(Platform.Version, 10);
if (majorVersionIOS <= 9) {
  console.log('Work around a change in behavior');
}
jw5wzhpr

jw5wzhpr4#

要将iOS本机模块桥接到React Native中,您可以沿着official instructions: iOS Native Modules进行操作。
以下是其中重要的部分:
1.打开ios文件夹中的.xcworkspace文件以打开XCode
1.选择文件〉新建〉文件
1.选择头文件
1.命名标头并选择您的项目及其测试作为目标

//  RCTCalendarModule.h
#import <React/RCTBridgeModule.h>
@interface RCTCalendarModule : NSObject <RCTBridgeModule>
@end

1.选择文件〉新建〉文件
1.选择Objective-C文件。将其命名为与头文件相同的名称,但使用.m代替.h。选择您的项目及其测试和目标

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

1.在React Native应用程序或组件中,导入NativeModules并使用新方法

import {NativeModules, Button} from 'react-native';

const {CalendarModule} = NativeModules;

const onPress = () => {
  CalendarModule.createCalendarEvent('testName', 'testLocation');
};

注意:您需要在迭代过程中不断重建iOS应用程序(例如,更改.m.h文件后运行yarn ios
对于你的第二个问题,你也可以将React Native添加到现有的iOS应用中。

相关问题