React - native 사용 원생 (ios, android) 제3자 sdk

React - native 네 이 티 브 제3자 sdk 사용
ios (아 리 백 천 사용자 피드백 을 예 로 들 면)
  • 먼저 cocopods (npm, ios 개발 과 유사 한 의존 관리 도구, 튜 토리 얼 을 설치 합 니 다.http://www.code4app.com/artic...
  • ios 루트 디 렉 터 리 에 Podfile 파일 을 만 들 고 다음 코드 (백 천 feedback 1.1.1 버 전 사용) 를 추가 한 다음 pod install 명령
  • 을 실행 합 니 다.
        target ‘Xss’ do 
           pod 'YWFeedbackFMWK', '~> 1.1.1'
        end
  • pod 설치 완료 후 xcode 로 Xss. xcworkspace 열기 (내 프로젝트 이름 은 Xss)프로젝트 에서 BCBridge. h 와 BCBridge. m 파일 을 만 들 고 js 와 원생 의 bridge 를 만 듭 니 다. h 파일 은 키 파일 일 뿐 입 니 다. m 파일 코드 는 다음 과 같 습 니 다. ios 에서 controllerView 전환 체 제 를 간략하게 소개 합 니 다. controllerView 전환 은 주로 두 가지 가 있 습 니 다. push 와 present 입 니 다. 그 중에서 push 는 같은 UINavigation Controller 에서 발생 해 야 합 니 다. push 의 애니메이션 은 가로로 자 르 는 것 으로 나타 납 니 다.present 의 애니메이션 은 아래쪽 에서 위로 자 르 기 (팝 업 창 과 유사) 입 니 다. react - native 자체 가 UINavigationController 에 있 기 때문에 저 는 아직 이 UINavigationController 에 push 할 수 있 는 방법 을 찾 지 못 했 습 니 다. 그래서 여 기 는 present 방식 을 사용 합 니 다.
  • 이러한 contrller 는 oc 에서 제한 이 많 고 다른 사람의 view Controller 를 사용 하면 사용자 정의 할 수 있 는 부분 이 너무 제한 되 어 있 기 때문에 이런 방식 을 추천 하지 않 습 니 다.
    
    #import "RCTBridge.h"
    #import "RCTEventDispatcher.h"
    #import "RCTRootView.h"
    #import "BCBridge.h"
    #import "YWFeedbackFMWK/YWFeedbackKit.h"
    
    static YWFeedbackKit *feedbackKit;        //         feedback  
    
    @interface BCBridge ()
    @property (nonatomic, strong) UINavigationController *navi;
    
    @end
    
    @implementation BCBridge
    
    +(void)initialize {
      //           appkey    feedbackKit
      feedbackKit = [[YWFeedbackKit alloc] initWithAppKey: @"yourappkey"];
    }
    
    //   Bridge, js     
    RCT_EXPORT_MODULE(BCBridge);
    
    //  js        BCFeedback
    RCT_EXPORT_METHOD(BCFeedback: (NSDictionary *)style) {
      //         ,style   NSDictionary   , js       ,js    Object
      feedbackKit.customUIPlist = style;
      //  present          (       oc),    1.0 feedback           ,2.0       
      dispatch_async(dispatch_get_main_queue(), ^{
          //               ,           ,          viewController
        [feedbackKit makeFeedbackViewControllerWithCompletionBlock:^(YWLightFeedbackViewController *viewController, NSError *error) {
            //       UINavigationController        viewController RootViewController
          UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:viewController];
          //   controller     ,    
          self.navi = nav;
          //   title
          viewController.title = @"    ";
          //       
          viewController.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"  " style:UIBarButtonItemStylePlain target:self action:@selector(back)];
          //   present  ( view          )
          [[UIApplication sharedApplication].delegate.window.rootViewController presentViewController:nav animated:YES completion:nil];
        }];
      });
    }
    
    //       
    - (void)back
    {
      [self.navi dismissViewControllerAnimated:YES completion:nil];
    }
    @end
    

    js 호출
    import {
      NativeModules
    } from 'react-native'
    
    NativeModules.BCBridge.BCFeedback(options)
    
  • 이로써 패 키 징 이 완료 되 었 습 니 다. 그러나 이러한 방식 은 우호 적 이지 않 고 react - native 통일 ui 의 사상 에 부합 되 지 않 기 때문에 이 방식 으로 제3자 sdk 를 패 키 징 하 는 방법 (데이터 획득) 을 권장 합 니 다. 그리고 react - native 를 사용 하여 통 일 된 ui (안 드 로 이 드 에 도 사용 할 수 있 고 ios 에 도 사용 할 수 있 습 니 다) 를 실현 하 는 것 을 권장 합 니 다.... 그러나 아 리 백 천 은 직접 데 이 터 를 얻 는 방법 을 제공 하지 않 았 기 때문에 sdk 를 선택 할 때 신중 해 야 합 니 다.
  • android
  • 공식 문서 에 따라 해당 버 전의 sdk 를 다운로드 합 니 다 (여 기 는 1.1.3 버 전 을 사용 합 니 다)
  • app 에서 libs 폴 더 를 만 듭 니 다. (없 으 면) sdk 에 있 는 파일 을 넣 고 프로젝트 루트 디 렉 터 리 에 있 는 build. gradle 파일 의 대응 위 치 를 다음 과 같이 추가 합 니 다
  • allprojects {
        repositories {
            ...
            flatDir {
                dirs 'libs'
            }
            ...
        }
    }

    app 디 렉 터 리 에 있 는 build. gradle 파일 의 대응 위치 에 다음 과 같은 문 구 를 추가 합 니 다. 큰 구멍 이 있 는 이 유 는 아 리 백 천 feedback Sdk 가 기본적으로 multidex 모드 로 컴 파일 되 었 기 때 문 입 니 다. 프로젝트 에 대응 하 는 설정 을 하지 않 으 면 컴 파일 이 통과 되 지 않 고 여러 가지 해결 방법 을 보고 이 문 제 를 해결 할 수 있 습 니 다. 눈물 이 납 니 다 ~ ~ ~
        defaultConfig {
            ...
            multiDexEnabled true                         //   multidex    ,     ,      
        }
    dependencies {
        ...
        compile 'com.android.support:multidex:1.0.0'     //        mulidex    
        compile(name: 'feedbackSdk', ext: 'aar')
        compile files('libs/securityguard-3.1.27.jar')
        compile files('libs/utdid4all-1.0.4.jar')
        compile files('libs/alisdk-ut-5.jar')
    }
  • MainActivity 클래스 에 초기 화 된 onCreate 방법 에 다음 문 구 를 추가 합 니 다 (FeedbackaAPI 가 도입 되 지 않 으 면 sdk 의존 이 추가 에 성공 했다 는 뜻 입 니 다. 이전 단 계 를 확인 하 십시오)
  •         MultiDex.install(this);      //      multidex    ,                ,  ~~~~
            FeedbackAPI.initAnnoy(this.getApplication(), "yourappkey");    //            
  • 패 키 징 activity 전환 방법 으로 BCBridge 류 생 성 (대응 의존 도입 주의)
  • 구체 적 인 코드 는 다음 과 같다.
    public class BCBridge extends ReactContextBaseJavaModule {
    
        public BCBridge(final ReactApplicationContext reactContext) {
            super(reactContext);
        }
    
        @Override
        public String getName() {
            //    js      
            return "BCBridge";
        }
    
        //  js          BCFeedback,readableMap  js  Object
        @ReactMethod
        public void BCFeedback(ReadableMap map) {
            ReadableNativeMap middleMap = (ReadableNativeMap) map;
            //  ReadableMap   hashMap
            Map nativeMap = middleMap.toHashMap();
            //     ui  
            FeedbackAPI. setUICustomInfo(nativeMap);
            //            
            FeedbackAPI.openFeedbackActivity(getReactApplicationContext());
        }
    }
  • BCBridgePackage 를 구축 하여 이전 패키지 방법 을 응용 에 통합 합 니 다 (저 는 이렇게 이해 합 니 다)
    public class BCBridgePackage implements ReactPackage {
    @Override
    public List createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.asList(
                new BCBridge(reactContext)
        );
    }
    
    @Override
    public List> createJSModules() {
        return Collections.emptyList();
    }
    
    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
    }
    . 동시에 MainApplication 에 대응 하 는 위치 에 다음 과 같은 코드 를 추가 합 니 다.(다른 사람 이 봉 인 된 rn - 네 이 티 브 구성 요 소 를 참조 하면 rn link 를 통 해 도 이 작업 을 수행 할 수 있 습 니 다. 그러나 이 파일 을 수 동 으로 변경 할 때 일부 상황 에서 rn link 가 효력 을 잃 을 수 있 습 니 다. 검사 에 주의 하 십시오)
  •     @Override
        protected List getPackages() {
          return Arrays.asList(
              ...
              new BCBridgePackage()
          );
        }
  • oc, 자바 의 코드 에 비해 이해 하기 쉽 지만 안 드 로 이 드 를 사용 하 는 activity 역시 ios 에서 언급 한 문제 가 있 습 니 다.
  • 총화
    위 에서 언급 한 원본 페이지 (ios 에서 viewController 로 나타 나 고 안 드 로 이 드 에서 activity 로 나타 납 니 다)따라서 다른 사람 이 집적 한 viewController 와 activity 를 직접 사용 하 는 것 을 제창 하지 않 고 이런 방식 으로 원생 중의 방법 이나 구성 요 소 를 집적 한 다음 에 rn 으로 전체적인 ui 구 조 를 실현 하면 개발 원가 와 성능 에 있어 큰 향상 을 얻 을 수 있다.

    좋은 웹페이지 즐겨찾기