简析 React Native 用户反馈功能实现

该库已开源到Github，地址请点击：react-native-feedback 【一行代码，双平台反馈】

用户反馈功能在App中屡见不鲜了。尤其是创业公司，在前期都会添加该功能来帮助自己更好的定位产品，以及收集产品的问题。

在App中实现该功能大概有两种：

（1）搭建自己的私有服务器，收集反馈数据

（2）依赖第三方平台，收集反馈数据

以上两者的区别也很明显，自己搭建服务器，需要实现一些额外的功能，例如反馈数据过滤，导出等等，而依赖第三方平台，功能服务会更加强大，减少编码时间。基于以上原因，本篇博客只讨论依赖第三方平台实现。

在原生App开发中，集成第三方平台功能越来越简单，例如Android中的Gradle，iOS中的CocoaPods。都很大程度解决了依赖第三方库的繁琐问题，使得开发者只需几命令代码即可完成。

而在React Native开发中，目前国内第三方平台的支持几乎没有。而做React Native开发的朋友很多是Web端，或者Android（iOS）转来开发。集成用户反馈平台就会变的很吃力。也是基于以上原因，为了让大家集成更方便，花了一些时间封装了基于阿里云反馈的双平台支持的用户反馈功能。

一、Android 平台配置

 

1. 添加依赖文件

（1）将 android / libs文件夹Copy到 android / app 目录下

（2）打开 android / app 目录下的 build.gradle 文件，添加如下代码：

    compile(name: 'alicloud-android-feedback-3.1.1', ext: 'aar')    compile files('libs/alicloud-android-monitor-2.5.1.1_for_bc_proguard.jar')    compile files('libs/utdid4all-1.1.5.3_proguard.jar')    compile files('libs/alicloud-android-utils-1.1.1.jar')

2.将 android / feedback 文件夹Copy到你的工程android目录的src下的包名目录下（注意：如果文件夹下的类文件报错，要将import的目录改成自己对应的包名即可）

二、iOS 平台配置

 

1. 添加依赖

（1）添加系统公共库：

         libz.tbd         libresolv.tbd         libsqlite3.tbd         CoreMotion.framework         CoreTelephony.framework         SystemConfiguration.framework

如何添加？看下图

根据名字搜索，添加即可。

（2）在 info.plist 中添加如下字段

<key>NSCameraUsageDescription</key><string>访问相机</string><key>NSPhotoLibraryUsageDescription</key><string>访问相册</string>

2. 将 ios / AliFeedback、ios / feedback  文件夹分别添加到工程中，并选择如下提示

三、使用

1. 引入桥接

import {  NativeModules} from 'react-native'

2. 打开反馈界面

NativeModules.feedbackModule.openFeedbackActivity(null)

openFeedbackActivity方法中可以传递json对象，用于向反馈平台传递额外参数信息。例如设备信息：let phone = { platform: 'android' } 。没有，传 null 即可。

四、效果图

  

界面定制可参考：反馈平台使用说明