Подключите Objective-C к React Native

Чтобы продолжить делиться своими знаниями о Native Module с новичками, работающими в мобильной разработке, в этой статье показан простой пример того, как вы можете написать приложение, используя объектный C, и экспортировать его в React Native. Начнем с нового приложения React Native:

1. Создайте новое приложение React Native

npx react-native init NativeModules

2. Откройте Xcode

NativeModules/ios/NativeModule.xcworkspace

3. Создайте файл заголовка и назовите его ObjC_to_RN.h.

Теперь нам нужно объявить наш класс @interface как NSObject, который будет экспортирован на сторону React Native:

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

4. Создайте файл Objective-C и назовите его ObjC_to_RN.m.

  • Импортируем класс @interface из ObjC_to_RN.h
  • Мы создаем класс @implement, который включает в себя модули и методы, которые мы хотим экспортировать в React Native.
  • Напишите простую функцию
  • Оберните функцию выше и экспортируйте ее в родную реакцию
//ObjC_to_RN.m
#import <Foundation/Foundation.h>
#import "ObjC_to_RN.h"
@implementation SampleClass
RCT_EXPORT_MODULE();
- (NSString *)hello{
NSLog( @"Hello world !");
return @"Hello world !";
}
RCT_EXPORT_METHOD(sayHello: (RCTResponseSenderBlock)callback{
callback(@[[NSNull null], self.hello]);
});
@end

4. Экспорт модуля Objective C в React Native

Вернитесь в нашу родную папку реакции и откройте файл App.js:

import React from 'react';
import {StyleSheet, Text, View, NativeModules, Button} from 'react-native';
const App = () => {
  const onPress = () => {
    const {SampleClass} = NativeModules;
    SampleClass.sayHello((_err, res) => console.log(res));
  };
  return (
    <View style={styles.container}>
      <Text> Practice !</Text>
      <Button
        title="Objective C to React Native"
        color="#841584"
        onPress={onPress}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
export default App;

И мы закончили.

Я надеюсь, что моя статья поможет людям легко понять, как связать Objective C и React Native через Native Module.

Спасибо за чтение этой статьи, не забудьте похлопать меня, если вы считаете, что это полезно.