Быстрый совет — Как запустить нативный код iOS в react native — Пример: Смена иконки приложения

Вы понимаете, что такое React Native и как реализовать базовые вещи, но теперь вы хотите понять, как реализовать более сложные вещи?
Чтобы объяснить концепцию запуска нативного кода iOS, я использую пакет Surya как наш простой пример, потому что изменение AppIcon во время выполнения — это простая строка кода на родном Swift/Objective-C, в которую вы передаете iconName как строку:

UIApplication.shared.setAlternateIconName(iconName)

Как запустить строку с помощью React Native

Я разместил здесь свой пример кода в качестве ссылки на код ниже.

Для выполнения вызовов нативной iOS вам понадобятся четыре файла:

• index.tsx, единственный файл-изменение, необходимый в общем коде, который создает связь с нативным кодом.

import { NativeModules } from 'react-native';
const changeIcon = (iconName: string): Promise<string> =>
    NativeModules.ChangeIcon.changeIcon(iconName);
export { changeIcon };

• ChangeIcon.m, файл Objective-C, добавленный в Xcode в каталог проекта, который делает нативный код доступным

#import <React/RCTBridgeModule.h>
@interface RCT_EXTERN_MODULE(ChangeIcon, NSObject)
RCT_EXTERN_METHOD(changeIcon:(NSString *)iconName withResolver:(RCTPromiseResolveBlock)resolve withRejecter:(RCTPromiseRejectBlock)reject)
@end

@objc(ChangeIcon)
class ChangeIcon: NSObject {

    @objc
    static func requiresMainQueueSetup() -> Bool {
        return false
    }

    @available(iOS 10.3, *)
    @objc(changeIcon:withResolver:withRejecter:)
    func changeIcon(iconName: String, resolve:RCTPromiseResolveBlock,reject:RCTPromiseRejectBlock) -> Void {
        if !UIApplication.shared.supportsAlternateIcons {
            reject("Error", "Alternate icon not supported", nil)
            return
        }
        let currentIcon = UIApplication.shared.alternateIconName
        if iconName == currentIcon {
            reject("Error", "Icon already in use", nil)
            return
        }
        resolve(true)
        UIApplication.shared.setAlternateIconName(iconName)
    }
}

• Bridging-Header, автоматически рекомендуется добавить в Xcode при добавлении вышеуказанного swift-файла, как вы можете видеть на изображении выше. Вам не нужно переименовывать его, просто добавьте эту строку

#import <React/RCTBridgeModule.h>

Использование

Не забудьте выполнить остальные шаги для обновления иконки приложения, связанные с добавлением изображения в определенную папку. Просто импортируйте функцию из вашего index.tsx, а затем самый простой способ использовать ее в вашем пользовательском интерфейсе — вызывать функцию при нажатии кнопки:

import { changeIcon } from './NativeModules';
...
    <Button title='checked' onPress={() => changeIcon('checked')}/>

Это часть серии статей, пожалуйста, подпишитесь на обновления и дайте мне знать, если вы хотите, чтобы я написал другую версию этой статьи, используя JSI (будущее React Native) вместо этого. Задавайте мне любые вопросы в Twitter и не забудьте связаться со мной на LinkedIn!

The First Prototype — это развивающийся консалтинговый малый бизнес в области проектирования и разработки мобильных приложений, специализирующийся на кросс-платформенных и нативных приложениях для iOS и Android. Зарегистрируйтесь на нашем сайте и поддержите нас в социальных сетях, чтобы быть в курсе простых инноваций в таких проектах, как наша 5-звездочная игра NumberBomb на iOS & Android!