|
| 1 | + |
| 2 | +React Native的网易云信插件 |
| 3 | +欢迎加入QQ群交流`153174456` |
| 4 | +## Demo |
| 5 | +[react-native-chat-demo](https://github.com/reactnativecomponent/react-native-chat-demo) |
| 6 | + |
| 7 | +#### 注意事项: |
| 8 | + |
| 9 | +##### 1.react-native版本需要0.47.0及以上NIMSDK对应版本4.7.0 |
| 10 | + |
| 11 | +##### 2.普通帐号不要使用5位数，因为5位数设定是系统帐号，尽量使用6位或者6位以上 |
| 12 | + |
| 13 | +## 如何安装 |
| 14 | + |
| 15 | +### 1.首先安装npm包 |
| 16 | + |
| 17 | +```bash |
| 18 | +npm install react-native-netease-im --save |
| 19 | +``` |
| 20 | + |
| 21 | +### 2.link |
| 22 | +```bash |
| 23 | +react-native link react-native-netease-im |
| 24 | +``` |
| 25 | + |
| 26 | +#### 手动link~（如果不能够自动link） |
| 27 | +##### ios |
| 28 | +``` |
| 29 | +a.打开XCode's工程中, 右键点击Libraries文件夹 ➜ Add Files to <...> |
| 30 | +b.去node_modules ➜ react-native-netease-im ➜ ios ➜ 选择 RNNeteaseIm.xcodeproj |
| 31 | +c.在工程Build Phases ➜ Link Binary With Libraries中添加libRNNeteaseIm.a |
| 32 | +``` |
| 33 | +##### Android |
| 34 | +``` |
| 35 | +// file: android/settings.gradle |
| 36 | +... |
| 37 | +
|
| 38 | +include ':react-native-netease-im' |
| 39 | +project(':react-native-netease-im').projectDir = new File(settingsDir, '../node_modules/react-native-netease-im/android') |
| 40 | +``` |
| 41 | + |
| 42 | +``` |
| 43 | +// file: android/app/build.gradle |
| 44 | +... |
| 45 | +
|
| 46 | +dependencies { |
| 47 | + ... |
| 48 | + compile project(':react-native-netease-im') |
| 49 | +} |
| 50 | +``` |
| 51 | + |
| 52 | +`android/app/src/main/java/<你的包名>/MainActivity.java` |
| 53 | + |
| 54 | +``` |
| 55 | +import com.netease.im.uikit.permission.MPermission; |
| 56 | +import com.netease.im.RNNeteaseImModule; |
| 57 | +import com.netease.im.ReceiverMsgParser; |
| 58 | +
|
| 59 | +public class MainActivity extends ReactActivity { |
| 60 | +
|
| 61 | + ...... |
| 62 | +
|
| 63 | + @Override |
| 64 | + protected void onCreate(Bundle savedInstanceState) { |
| 65 | + super.onCreate(savedInstanceState); |
| 66 | + if(ReceiverMsgParser.checkOpen(getIntent())){//在后台时处理点击推送消息 |
| 67 | + RNNeteaseImModule.launch = getIntent(); |
| 68 | + } |
| 69 | + } |
| 70 | +
|
| 71 | + @Override |
| 72 | + public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) { |
| 73 | + MPermission.onRequestPermissionsResult(this, requestCode, permissions, grantResults); |
| 74 | + } |
| 75 | + ``` |
| 76 | + |
| 77 | +`android/app/src/main/java/<你的包名>/MainApplication.java`中添加如下两行： |
| 78 | + |
| 79 | +```java |
| 80 | +... |
| 81 | +import com.netease.im.RNNeteaseImPackage; // 在public class MainApplication之前import |
| 82 | +import com.netease.im.IMApplication; |
| 83 | + |
| 84 | +public class MainApplication extends Application implements ReactApplication { |
| 85 | + |
| 86 | + private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { |
| 87 | + @Override |
| 88 | + protected boolean getUseDeveloperSupport() { |
| 89 | + return BuildConfig.DEBUG; |
| 90 | + } |
| 91 | + |
| 92 | + @Override |
| 93 | + protected List<ReactPackage> getPackages() { |
| 94 | + return Arrays.<ReactPackage>asList( |
| 95 | + new RNNeteaseImPackage(), // 然后添加这一行 |
| 96 | + new MainReactPackage() |
| 97 | + ); |
| 98 | + } |
| 99 | + }; |
| 100 | + |
| 101 | + @Override |
| 102 | + public ReactNativeHost getReactNativeHost() { |
| 103 | + return mReactNativeHost; |
| 104 | + } |
| 105 | + @Override |
| 106 | + public void onCreate() { |
| 107 | + //初始化方法appId以及appKey在小米开放平台获取，小米推送证书名称在网易云信后台设置 |
| 108 | + IMApplication.setDebugAble(BuildConfig.DEBUG); |
| 109 | + IMApplication.init(this, MainActivity.class,R.drawable.ic_stat_notify_msg,new IMApplication.MiPushConfig("小米推送证书名称","小米推送appId","小米推送的appKey")); |
| 110 | + ... |
| 111 | + } |
| 112 | +} |
| 113 | +``` |
| 114 | + |
| 115 | + |
| 116 | +### 3.工程配置 |
| 117 | +#### iOS配置 |
| 118 | +install with CocoaPods |
| 119 | +``` |
| 120 | +pod 'NIMSDK', '4.9.0' |
| 121 | +pod 'SSZipArchive', '~> 1.2' |
| 122 | +pod 'Reachability', '~> 3.1.1' |
| 123 | +pod 'CocoaLumberjack', '~> 2.0.0-rc2' |
| 124 | +pod 'FMDB', '~>2.5' |
| 125 | +``` |
| 126 | +Run `pod install` |
| 127 | + |
| 128 | +在工程target的`Build Phases->Link Binary with Libraries`中加入`、libsqlite3.0.tbd、libc++.tbd、libz.tbd、CoreTelephony.framework、AVFoundation.framework、CoreMedia.framework、CoreMotion.framework` |
| 129 | + |
| 130 | + |
| 131 | + |
| 132 | +在你工程的`AppDelegate.m`文件中添加如下代码： |
| 133 | + |
| 134 | +``` |
| 135 | +... |
| 136 | +#import <NIMSDK/NIMSDK.h> |
| 137 | +#import "NTESSDKConfigDelegate.h" |
| 138 | +@interface AppDelegate () |
| 139 | +@property (nonatomic,strong) NTESSDKConfigDelegate *sdkConfigDelegate; |
| 140 | +@end |
| 141 | +@implementation AppDelegate |
| 142 | +
|
| 143 | +- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions |
| 144 | +{ |
| 145 | +... |
| 146 | +[self setupNIMSDK]; |
| 147 | +[self registerAPNs]; |
| 148 | +if (launchOptions) {//未启动时，点击推送消息 |
| 149 | + NSDictionary * remoteNotification = [launchOptions objectForKey:UIApplicationLaunchOptionsRemoteNotificationKey]; |
| 150 | + if (remoteNotification) { |
| 151 | + [self performSelector:@selector(clickSendObserve:) withObject:remoteNotification afterDelay:0.5]; |
| 152 | + } |
| 153 | + } |
| 154 | +... |
| 155 | +return YES; |
| 156 | +} |
| 157 | +- (void)clickSendObserve:(NSDictionary *)dict{ |
| 158 | + [[NSNotificationCenter defaultCenter]postNotificationName:@"ObservePushNotification" object:@{@"dict":dict,@"type":@"launch"}]; |
| 159 | +} |
| 160 | +- (void)setupNIMSDK |
| 161 | +{ |
| 162 | +//在注册 NIMSDK appKey 之前先进行配置信息的注册，如是否使用新路径,是否要忽略某些通知，是否需要多端同步未读数 |
| 163 | +self.sdkConfigDelegate = [[NTESSDKConfigDelegate alloc] init]; |
| 164 | +[[NIMSDKConfig sharedConfig] setDelegate:self.sdkConfigDelegate]; |
| 165 | +[[NIMSDKConfig sharedConfig] setShouldSyncUnreadCount:YES]; |
| 166 | +//appkey 是应用的标识，不同应用之间的数据（用户、消息、群组等）是完全隔离的。 |
| 167 | +//注册APP，请将 NIMSDKAppKey 换成您自己申请的App Key |
| 168 | +[[NIMSDK sharedSDK] registerWithAppID:@"appkey" cerName:@"证书名称"]; |
| 169 | +} |
| 170 | +
|
| 171 | +#pragma mark - misc |
| 172 | +- (void)registerAPNs |
| 173 | +{ |
| 174 | +[[UIApplication sharedApplication] registerForRemoteNotifications]; |
| 175 | +UIUserNotificationType types = UIUserNotificationTypeBadge | UIUserNotificationTypeSound | UIUserNotificationTypeAlert; |
| 176 | +UIUserNotificationSettings *settings = [UIUserNotificationSettings settingsForTypes:types categories:nil]; |
| 177 | +[[UIApplication sharedApplication] registerUserNotificationSettings:settings]; |
| 178 | +} |
| 179 | +
|
| 180 | +- (void)application:(UIApplication *)app didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken |
| 181 | +{ |
| 182 | + [[NIMSDK sharedSDK] updateApnsToken:deviceToken]; |
| 183 | +} |
| 184 | +//在后台时处理点击推送消息 |
| 185 | +- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo{ |
| 186 | +
|
| 187 | + [[NSNotificationCenter defaultCenter]postNotificationName:@"ObservePushNotification" object:@{@"dict":userInfo,@"type":@"background"}]; |
| 188 | +} |
| 189 | +- (void)application:(UIApplication *)app didFailToRegisterForRemoteNotificationsWithError:(NSError *)error |
| 190 | +{ |
| 191 | + NSLog(@"fail to get apns token :%@",error); |
| 192 | +} |
| 193 | +- (void)applicationDidEnterBackground:(UIApplication *)application { |
| 194 | + NSInteger count = [[[NIMSDK sharedSDK] conversationManager] allUnreadCount]; |
| 195 | + [[UIApplication sharedApplication] setApplicationIconBadgeNumber:count]; |
| 196 | +} |
| 197 | +``` |
| 198 | + |
| 199 | +#### Android配置 |
| 200 | + |
| 201 | +在`android/app/build.gradle`里，defaultConfig栏目下添加如下代码： |
| 202 | + |
| 203 | + |
| 204 | +在`AndroidManifest.xml`里，添加如下代码： |
| 205 | +``` |
| 206 | +< manifest |
| 207 | +
|
| 208 | + ...... |
| 209 | +
|
| 210 | + <!-- SDK 权限申明, 第三方 APP 接入时，请将 com.im.demo 替换为自己的包名 --> |
| 211 | + <!-- 和下面的 uses-permission 一起加入到你的 AndroidManifest 文件中。 --> |
| 212 | + <permission |
| 213 | + android:name="com.im.demo.permission.RECEIVE_MSG" |
| 214 | + android:protectionLevel="signature"/> |
| 215 | + <!-- 接收 SDK 消息广播权限， 第三方 APP 接入时，请将 com.im.demo 替换为自己的包名 --> |
| 216 | + <uses-permission android:name="com.im.demo.permission.RECEIVE_MSG"/> |
| 217 | + <!-- 小米推送 --> |
| 218 | + <permission |
| 219 | + android:name="com.im.demo.permission.MIPUSH_RECEIVE" |
| 220 | + android:protectionLevel="signature"/> |
| 221 | + <uses-permission android:name="com.im.demo.permission.MIPUSH_RECEIVE"/> |
| 222 | +
|
| 223 | + ...... |
| 224 | + < application |
| 225 | + ...... |
| 226 | + <!-- 设置你的网易聊天App Key --> |
| 227 | + <meta-data |
| 228 | + android:name="com.netease.nim.appKey" |
| 229 | + android:value="App Key" /> |
| 230 | + <!--添加新的 IPC 数据共享机制，替换不安全的多进程读写 SharedPreference--> |
| 231 | + <provider |
| 232 | + android:name="com.netease.nimlib.ipc.NIMContentProvider" |
| 233 | + android:authorities="com.im.demo.ipc.provider" |
| 234 | + android:exported="false" |
| 235 | + android:process=":core" /> |
| 236 | +
|
| 237 | +``` |
| 238 | + |
| 239 | +## 如何使用 |
| 240 | + |
| 241 | +### 引入包 |
| 242 | + |
| 243 | +``` |
| 244 | +import {NimSession} from 'react-native-netease-im'; |
| 245 | +``` |
| 246 | + |
| 247 | +### API |
| 248 | + |
| 249 | +参考[index.js](https://github.com/reactnativecomponent/react-native-netease-im/blob/master/index.js) |
| 250 | + |
| 251 | +#### 监听会话 |
| 252 | +``` |
| 253 | +NativeAppEventEmitter.addListener("observeRecentContact",(data)=>{ |
| 254 | + console.log(data); //返回会话列表和未读数 |
| 255 | +})； |
| 256 | +``` |
| 257 | +#### 推送 |
| 258 | +``` |
| 259 | +//程序运行时获取的推送点击事件 |
| 260 | +NativeAppEventEmitter.addListener("observeLaunchPushEvent",(data)=>{ |
| 261 | + console.log(data); |
| 262 | +})； |
| 263 | +//程序后台时获取的推送点击事件 |
| 264 | +NativeAppEventEmitter.addListener("observeBackgroundPushEvent",(data)=>{ |
| 265 | + console.log(data); |
| 266 | +})； |
| 267 | +//推送数据格式 |
| 268 | +{ |
| 269 | + ... |
| 270 | + sessionBody：{ |
| 271 | + sessionId:"", |
| 272 | + sessionType:"", |
| 273 | + sessionName:"" |
| 274 | + } |
| 275 | +} |
| 276 | +
|
| 277 | +``` |
| 278 | + |
0 commit comments