Question

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

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

我用Google搜索并得到了一些示例，指出第二个很可能，Instagram在编辑个人资料屏幕中做到了。

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

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

第二个问题：

当我们将iOS本地版本与本机集成时，它将通过一个桥梁。让我们说我在Swift中创建一个应用程序，以获得其中的原生视图，我们必须通过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）代码

是的，我能够这样做： -

我创建了一个React Native项目，编译并在模拟器中运行它。
转到项目目录结构中的iOS文件夹，然后在xcode中打开.xcodeproj。
创建一个目标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');
}

React Native

3 个答案: