퀵팁-리액트 네이티브에서 네이티브 iOS 코드를 실행하는 방법-예: 앱 아이콘 변경

React Native와 기본적인 것을 구현하는 방법을 이해하고 있지만 이제 더 복잡한 것을 이해하고 싶습니까?
기본 iOS 코드를 실행하는 개념을 설명하기 위해 Surya's package을 간단한 예로 사용하고 있습니다. 런타임 중에 AppIcon을 변경하는 것은 native Swift/Objective-C에서 iconName을 문자열로 전달하는 간단한 코드 라인이기 때문입니다.

UIApplication.shared.setAlternateIconName(iconName)


React Native를 사용하여 라인을 실행하는 방법



아래 코드에 대한 참조로 내 샘플 코드here를 배치했습니다.

기본 iOS를 호출하려면 4개의 파일이 필요합니다.
  • 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는 위의 이미지에서 볼 수 있듯이 위의 swift 파일을 추가할 때 Xcode에 의해 자동으로 추가되도록 권장됩니다. 이름을 바꿀 필요 없이 이 줄만 추가하면 됩니다.

  • #import <React/RCTBridgeModule.h>
    


    용법



    특정 폴더에 이미지를 추가하는 것과 관련된 앱 아이콘 업데이트other steps를 완료하는 것을 잊지 마십시오. index.tsx에서 함수를 가져온 다음 UI에서 사용하는 가장 간단한 방법은 버튼을 눌러 함수를 호출하는 것입니다.

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



    이것은 기사 시리즈의 일부입니다. 업데이트를 받으려면 구독하고 대신 JSI( )를 사용하여 이 기사의 다른 버전을 작성하기를 원하는 경우 알려주십시오. 질문이 있으시면 로 연락하는 것을 잊지 마세요!

    The First Prototype은 Cross platform and Native iOS & Android apps을 전문으로 하는 신흥 모바일 앱 디자인 및 개발 컨설팅 중소기업입니다. iOSAndroid의 5성 NumberBomb 게임과 같은 프로젝트의 간단한 혁신에 대한 정보를 받으려면 저희 웹사이트에 가입하세요!

    좋은 웹페이지 즐겨찾기