Git Product home page Git Product logo

react-native-netease-im's Introduction

React Native的网易云信插件

Demo

react-native-chat-demo

注意: react-native版本需要0.40.0及以上

如何安装

1.首先安装npm包

npm install react-native-netease-im --save

2.link

rnpm link react-native-netease-im

手动link~(如果不能够自动link)

#####ios a.打开XCode's工程中, 右键点击Libraries文件夹 ➜ Add Files to <...> b.去node_modules ➜ react-native-netease-im ➜ ios ➜ 选择 RNNeteaseIm.xcodeproj c.在工程Build Phases ➜ Link Binary With Libraries中添加libRNNeteaseIm.a

#####Android

// file: android/settings.gradle
...

include ':react-native-netease-im'
project(':react-native-netease-im').projectDir = new File(settingsDir, '../node_modules/react-native-netease-im/android')
// file: android/app/build.gradle
...

dependencies {
    ...
    compile project(':react-native-netease-im')
}

android/app/src/main/java/<你的包名>/MainActivity.java

import com.netease.im.uikit.permission.MPermission;

public class MainActivity extends ReactActivity {

 ......

 @Override
 public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        MPermission.onRequestPermissionsResult(this, requestCode, permissions, grantResults);
 }

android/app/src/main/java/<你的包名>/MainApplication.java中添加如下两行:

...
import com.netease.im.RNNeteaseImPackage;  // 在public class MainApplication之前import
import com.netease.im.IMApplication;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new RNNeteaseImPackage(), // 然后添加这一行
          new MainReactPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
   @Override
  public void onCreate() {
    //初始化方法appId以及appKey在小米开放平台获取,小米推送证书名称在网易云信后台设置
    IMApplication.init(this, MainActivity.class,R.drawable.ic_stat_notify_msg,new    IMApplication.MiPushConfig("小米推送证书名称","小米推送appId","小米推送的appKey"));
   ...
  }
}

3.工程配置

iOS配置

在工程target的Build Phases->Link Binary with Libraries中加入、libsqlite3.tbd、libc++、libz.tbd、CoreTelephony.framework

在你工程的AppDelegate.m文件中添加如下代码:

#import "../Libraries/LinkingIOS/RCTLinkingManager.h"

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
  return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}

Android配置

android/app/build.gradle里,defaultConfig栏目下添加如下代码:

AndroidManifest.xml里,添加如下代码:

< manifest

    ......

    <!-- SDK 权限申明, 第三方 APP 接入时,请将 com.im.demo 替换为自己的包名 -->
    <!-- 和下面的 uses-permission 一起加入到你的 AndroidManifest 文件中。 -->
    <permission
        android:name="com.im.demo.permission.RECEIVE_MSG"
        android:protectionLevel="signature"/>
    <!-- 接收 SDK 消息广播权限, 第三方 APP 接入时,请将 com.netease.nim.demo 替换为自己的包名 -->
    <uses-permission android:name="com.im.demo.permission.RECEIVE_MSG"/>
    <!-- 小米推送 -->
    <permission
        android:name="com.im.demo.permission.MIPUSH_RECEIVE"
        android:protectionLevel="signature"/>
    <uses-permission android:name="com.im.demo.permission.MIPUSH_RECEIVE"/>

    ......
    < application
            ......
            <!-- 设置你的网易聊天App Key -->
             <meta-data
                        android:name="com.netease.nim.appKey"
                        android:value="App Key" />

如何使用

引入包

import NIM from 'react-native-netease-im';

API

NIM.login()

// 登录参数 
{
	accid: "", //云信注册帐号
    token:"" //登录的token
}

返回一个Promise对象

监听会话

NativeAppEventEmitter.addListener("observeRecentContact",(data)=>{
  console.log(data); //返回内容android和ios有区别
});

react-native-netease-im's People

Contributors

hzlgit avatar xhp avatar

Watchers

James Cloos avatar Uther avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.