摘要：但阿里百川并沒(méi)有提供直接獲取數(shù)據(jù)的方法，所以選擇時(shí)一定要慎重。

首先安裝cocopods(類似于npm，ios開(kāi)發(fā)的依賴管理工具，教程：http://www.code4app.com/artic...

在ios根目錄下創(chuàng)建Podfile文件，添加如下代碼(使用的是百川feedback1.1.1版本)，然后執(zhí)行pod install命令

    target ‘Xss’ do 
       pod "YWFeedbackFMWK", "~> 1.1.1"
    end

pod安裝完成后，使用xcode打開(kāi)Xss.xcworkspace(我的項(xiàng)目名是Xss)，在項(xiàng)目中創(chuàng)建BCBridge.h以及BCBridge.m文件，以建立js和原生的bridge，.h文件只是個(gè)頭文件，.m文件代碼如下
在這里簡(jiǎn)要介紹下ios下的controllerView切換機(jī)制，controllerView 切換主要有兩種，push和present，其中，push必須在同一UINavigationController發(fā)生，push的動(dòng)畫(huà)表現(xiàn)為橫向切入，present的動(dòng)畫(huà)為底部向上切入(類似于彈窗)，由于react-native本身處于一個(gè)UINavigationController中，然后我目前還沒(méi)有找到能向這個(gè)UINavigationController中push的方法，所以這里采用的是present的方式。

由于這種controller切換在oc里限制比較多，且使用別人的viewController可自定義的部分太受限，所以不是很推薦這種方式。

#import "RCTBridge.h"
#import "RCTEventDispatcher.h"
#import "RCTRootView.h"
#import "BCBridge.h"
#import "YWFeedbackFMWK/YWFeedbackKit.h"

static YWFeedbackKit *feedbackKit;        // 聲明一個(gè)阿里百川feedback對(duì)象

@interface BCBridge ()
@property (nonatomic, strong) UINavigationController *navi;

@end

@implementation BCBridge

+(void)initialize {
  // 使用在百川后臺(tái)申請(qǐng)的appkey來(lái)初始化feedbackKit
  feedbackKit = [[YWFeedbackKit alloc] initWithAppKey: @"yourappkey"];
}

// 建立Bridge，在js中直接使用
RCT_EXPORT_MODULE(BCBridge);

// 在js中調(diào)用時(shí)函數(shù)名為BCFeedback
RCT_EXPORT_METHOD(BCFeedback: (NSDictionary *)style) {
  // 自定義的樣式注入，style變量為NSDictionary類型的，有js方法調(diào)用時(shí)傳入，js中表現(xiàn)為Object
  feedbackKit.customUIPlist = style;
  // 將present操作提升到主進(jìn)程來(lái)做(這里我也不太懂oc)，這里百川1.0的feedback必須這樣做才能切換過(guò)去，2.0不存在這個(gè)問(wèn)題
  dispatch_async(dispatch_get_main_queue(), ^{
      // 調(diào)用阿里百川提供的初始化方法，此方法接受一個(gè)回調(diào)函數(shù)，默認(rèn)參數(shù)為初始化后的viewController
    [feedbackKit makeFeedbackViewControllerWithCompletionBlock:^(YWLightFeedbackViewController *viewController, NSError *error) {
        // 創(chuàng)建一個(gè)新的UINavigationController以阿里百川返回的viewController為RootViewController
      UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:viewController];
      // 將此controller設(shè)為當(dāng)前域，可以退出
      self.navi = nav;
      // 設(shè)置title
      viewController.title = @"意見(jiàn)反饋";
      // 設(shè)置關(guān)閉按鈕
      viewController.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"關(guān)閉" style:UIBarButtonItemStylePlain target:self action:@selector(back)];
      // 執(zhí)行present操作(此view將從屏幕下方向上切入)
      [[UIApplication sharedApplication].delegate.window.rootViewController presentViewController:nav animated:YES completion:nil];
    }];
  });
}

// 聲明退出函數(shù)
- (void)back
{
  [self.navi dismissViewControllerAnimated:YES completion:nil];
}
@end

js中調(diào)用

import {
  NativeModules
} from "react-native"

NativeModules.BCBridge.BCFeedback(options)

至此，封裝完畢，但是這種方式并不友好，而且也不符合react-native統(tǒng)一ui的思想，所以建議使用此種方式來(lái)封裝第三方sdk的方法(獲取數(shù)據(jù))，然后使用react-native實(shí)現(xiàn)一套統(tǒng)一的ui(既可用于android也可用于ios)。但阿里百川并沒(méi)有提供直接獲取數(shù)據(jù)的方法，所以選擇sdk時(shí)一定要慎重。

依據(jù)官方文檔下載對(duì)應(yīng)版本的sdk(這里使用的是1.1.3版本的)

在app下建立libs文件夾(如果沒(méi)有的話)，將sdk中文件放進(jìn)去，將項(xiàng)目根目錄下的build.gradle文件對(duì)應(yīng)位置添加如下語(yǔ)句

allprojects {
    repositories {
        ...
        flatDir {
            dirs "libs"
        }
        ...
    }
}

在app目錄下的build.gradle文件對(duì)應(yīng)位置添加如下語(yǔ)句
有個(gè)大坑是因?yàn)榘⒗锇俅╢eedbackSdk默認(rèn)使用multidex模式編譯，如果不在項(xiàng)目中做對(duì)應(yīng)設(shè)置，會(huì)導(dǎo)致一直編譯不通過(guò)，看了無(wú)數(shù)種解決辦法才解決此問(wèn)題，淚崩~~~~

    defaultConfig {
        ...
        multiDexEnabled true                         // 開(kāi)啟multidex模式編譯，此處為大坑，否則編譯不過(guò)
    }
dependencies {
    ...
    compile "com.android.support:multidex:1.0.0"     // 此依賴用于開(kāi)啟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方法中添加如下語(yǔ)句(如果FeedbackAPI無(wú)法引入，說(shuō)明sdk依賴為添加成功，請(qǐng)檢查上一步)

        MultiDex.install(this);      // 同樣是開(kāi)啟multidex模式編譯，網(wǎng)上大部分解決方案都沒(méi)提這個(gè)設(shè)置，淚崩~~~~
        FeedbackAPI.initAnnoy(this.getApplication(), "yourappkey");    // 初始化阿里百川意見(jiàn)反饋

封裝activity切換方法
創(chuàng)建BCBridge類(注意引入對(duì)應(yīng)依賴)

具體代碼如下

public class BCBridge extends ReactContextBaseJavaModule {

    public BCBridge(final ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        // 設(shè)置在js中調(diào)用的類名
        return "BCBridge";
    }

    // 在js中調(diào)用的方法名同樣為BCFeedback，readableMap對(duì)應(yīng)js中的Object
    @ReactMethod
    public void BCFeedback(ReadableMap map) {
        ReadableNativeMap middleMap = (ReadableNativeMap) map;
        // 將ReadableMap轉(zhuǎn)化為hashMap
        Map nativeMap = middleMap.toHashMap();
        // 設(shè)置部分ui樣式
        FeedbackAPI. setUICustomInfo(nativeMap);
        // 切換到阿里百川反饋界面
        FeedbackAPI.openFeedbackActivity(getReactApplicationContext());
    }
}

建立BCBridgePackage
將上一步封裝的方法集成到應(yīng)用中(我是這樣理解的)

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();
}
}

同時(shí)在MainApplication中對(duì)應(yīng)位置添加如下代碼(如果引用一些別人封裝好的rn-原生組件，通過(guò)rn link 也能實(shí)現(xiàn)此操作，但是手動(dòng)更改此文件時(shí)可能會(huì)導(dǎo)致一些情況下rn link失效，請(qǐng)注意檢查)

    @Override
    protected List getPackages() {
      return Arrays.asList(
          ...
          new BCBridgePackage()
      );
    }

對(duì)比于oc，java的代碼好理解些，但是使用android的activity同樣會(huì)有ios中提到的問(wèn)題。

由于上面提到的封裝原生的頁(yè)面(ios中體現(xiàn)為viewController，android中體現(xiàn)為activity)，所以不提倡直接去使用別人集成好的viewController和activity，比較提倡使用這類方式來(lái)集成原生中的方法或者是組件，然后用rn來(lái)實(shí)現(xiàn)整體的ui布局，這樣在開(kāi)發(fā)成本上以及性能上都能得到很大的提高。