在 React Native 中集成 iOS 组件

Question

我是 React Native 开发的新手，我了解 iOS。 只想知道几点：

1. 我们可以在 React Native 应用程序中添加 iOS（swift 或 Objective C）代码吗？
2. 我们可以将 React Native Views 添加到现有的 iOS 应用程序中吗？

我已经用谷歌搜索并得到了指向第二个的例子，这是很有可能的，Instagram 在编辑个人资料屏幕中做到了。

但我找不到它是 React Native 应用程序的示例，我们在两者之间引入了 swift 或 Objective-C 代码。

如果有人知道案例 1 的任何链接或示例，请告诉我。

第二个问题：

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

Answer 1

是的。两个都可以

1.

https://facebook.github.io/react-native/docs/platform-specific-code.html

2.

https://codeburst.io/integrate-react-native-into-an-existing-app-ios-87c947a16044 https://facebook.github.io/react-native/docs/integration-with-existing-apps.html

Answer 2

我们能否在 React Native App 中添加 iOS（swift 或 Objective C）代码

是的，我能够这样做：-

1. 我创建了一个 React Native 项目，编译它并在模拟器中运行它。
2. 进入项目目录结构中的iOS文件夹，在xcode中打开.xcodeproj。
3. 创建一个目标 c 文件 (MyObjcClass) 并制作您想在 React 中使用的函数。

MyObjcClass.h

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

@interface MyObjcClass : NSObject <RCTBridgeModule>

@end

MyObjcClass.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 中调用目标 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>
      );
  }
}

Answer 3

是的，我们可以做

import {Platform} from 'react-native';

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