Package Exports

maxleap-helpcenter-react-native

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (maxleap-helpcenter-react-native) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

HelpCenter RN

集成 SDK

集成 iOS 环境

重要：先安装 maxleap-react-native, 参照 MaxLeap 开发文档

安装 maxleap-helpcenter-react-native

npm install --save maxleap-helpcenter-react-native

打开 Finder，找到本项目的根目录，使用 Xcode 打开 iOS 工程（双击 .xcodeproj 文件即可），然后导航到 /node_modules/maxleap-helpcenter-react-native/ios/lib 目录，把该目录下的 frameworks 都拖到 Xcode 工程中
添加 Framework Search Paths

在 Xcode 中，导航到 Targets -> YourAppName -> "Build Settings"，找到 “Framework Search Paths” 一项，添加下面这个路径：

$(SRCROOT)/../node_modules/maxleap-helpcenter-react-native/ios/lib 并设置为recursive

集成 Android 环境

按照 MaxLeap 文档添加项目依赖。

修改父工程目录下的 build.gradle 文件（与 settings.gradle 位于同级目录）。

repositories {
    flatDir{
        dirs '../../node_modules/maxleap-helpcenter-react-native/dist/android'
    }
}

修改应用目录下的 build.gradle 文件，添加以下依赖

dependencies {
    compile(name:'maxleap-helpcenter-react-native', ext:'aar')
}

修改工程的主 Activity 文件。

import com.maxleap.reactnative.MLHelpCenterReactPackage;

 @Override
protected void onCreate(Bundle savedInstanceState) {
    MaxLeap.initialize(this, APP_ID, API_KEY, MaxLeap.REGION_CN);
    super.onCreate(savedInstanceState);
}

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new MLHelpCenterReactPackage()
    );
}

API

ShowFAQs()

弹出 FAQs 界面, 此界面右上角会有一个按钮 Contact Us, 点击会跳到用户反馈界面

showConversation()

直接弹出用户反馈界面

示例

import React, { Component } from 'react';
import ReactNative, { View, Text, TouchableHighlight } from 'react-native';
import HelpCenter from 'maxleap-helpcenter-react-native';

const styles = {
  container: {
    justifyContent: 'center',
    flex: 1
  },
  btnText: {
    textAlign: 'center',
    fontSize: 18
  },
  btn: {
    height: 50,
    justifyContent: 'center'
  }
};

export default class Main extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={()=>HelpCenter.showFAQs()}
                            underlayColor={'#32BE78'}
                            style={styles.btn}>
          <Text style={styles.btnText}>
            Help
          </Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={()=>HelpCenter.showConversation()}
                            underlayColor={'#F2BE78'}
                            style={styles.btn}>
          <Text style={styles.btnText}>
            Contact Us
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
}