Вы понимаете, что такое 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
— ChangeIcon.swift, добавленный в Xcode в проект, содержащий нативный код (нажмите, чтобы развернуть)
@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!