React - native 사용 원생 (ios, android) 제3자 sdk
7166 단어 포장 하 다react-native자바 script
ios (아 리 백 천 사용자 피드백 을 예 로 들 면)
target ‘Xss’ do
pod 'YWFeedbackFMWK', '~> 1.1.1'
end
#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)
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')
}
MultiDex.install(this); // multidex , , ~~~~
FeedbackAPI.initAnnoy(this.getApplication(), "yourappkey"); //
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());
}
}
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()
);
}
위 에서 언급 한 원본 페이지 (ios 에서 viewController 로 나타 나 고 안 드 로 이 드 에서 activity 로 나타 납 니 다)따라서 다른 사람 이 집적 한 viewController 와 activity 를 직접 사용 하 는 것 을 제창 하지 않 고 이런 방식 으로 원생 중의 방법 이나 구성 요 소 를 집적 한 다음 에 rn 으로 전체적인 ui 구 조 를 실현 하면 개발 원가 와 성능 에 있어 큰 향상 을 얻 을 수 있다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Expo에서 react-native에서 three.js 사용 (expo-three 도입)expo-three라고 하는 라이브러리를 도입하려고 생각했습니다만, 일본어 문헌이 적게 시간이 걸려 버렸기 때문에, 스스로 재검토하는 의도도 담아 간단하게 정리하겠습니다. react-native, expo 등의 도입...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.