Интеграция компонента iOS в React Native

Question

Я новичок в разработке React Native, я знаю iOS.Просто хочу узнать о нескольких моментах:

1. Можем ли мы добавить код iOS (swift или target C) в собственное приложение React?
2. Можем ли мы добавить собственные представления React в существующую iOSapp?

Я гуглил и получил примеры, указывающие на то, что второй вариант вполне возможен, а Instagram сделал это на экране редактирования профиля.

Но я не могу найти примеры, где этоReact Native, и мы вводим код swift или Objective-C между ними.

Пожалуйста, если кто-нибудь знает какие-либо ссылки или примеры, доступные для случая 1, пожалуйста, дайте мне знать об этом.

2ndвопрос:

• Когда мы интегрируем реагировать родным с iOS, это будет через мост.Допустим, я создаю приложение в Swift, чтобы реагировать на нативные представления в нем, нам нужно пройти через 2 моста, один из которых преобразует Swift в Objective-C, а затем соединить Objective-C с React Native.Это верно?Если да, будет ли это так же быстро, как нативное приложение?

Answer 1

Можем ли мы добавить код iOS (swift или target C) в приложение React Native

Да, я смог сделать это: -

1. Я создал проект React Native, скомпилировал и запустил в симуляторе.
2. Перейдите в папку iOS в структуре каталогов в проекте и откройте .xcodeproj в xcode.
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.Ниже я покажу, как вызвать объект c в React.

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 2

Да.Вы можете сделать оба из них

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