摘要：但阿里百川并沒有提供直接獲取數據的方法，所以選擇時一定要慎重。

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

在ios根目錄下創建Podfile文件，添加如下代碼(使用的是百川feedback1.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必須在同一UINavigationController發生，push的動畫表現為橫向切入，present的動畫為底部向上切入(類似于彈窗)，由于react-native本身處于一個UINavigationController中，然后我目前還沒有找到能向這個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;        // 聲明一個阿里百川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的思想，所以建議使用此種方式來封裝第三方sdk的方法(獲取數據)，然后使用react-native實現一套統一的ui(既可用于android也可用于ios)。但阿里百川并沒有提供直接獲取數據的方法，所以選擇sdk時一定要慎重。

依據官方文檔下載對應版本的sdk(這里使用的是1.1.3版本的)

在app下建立libs文件夾(如果沒有的話)，將sdk中文件放進去，將項目根目錄下的build.gradle文件對應位置添加如下語句

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

在app目錄下的build.gradle文件對應位置添加如下語句
有個大坑是因為阿里百川feedbackSdk默認使用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方法中添加如下語句(如果FeedbackAPI無法引入，說明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，java的代碼好理解些，但是使用android的activity同樣會有ios中提到的問題。

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