本文前面给还未在ios下安装过wechat插件的同学们使用,如果已经在ios上使用过wechat的同学们一定要看最后的注意事项。
了解ios版本的react-native-wechat的可以点击 https://www.jianshu.com/p/3f424cccb888;
安装插件:
npm install react-native-wechat --save
在你的react-native的目录里:
在android/setting.gradle文件最后添加代码:
include ':RCTWeChat'
project(':RCTWeChat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wechat/android')
在android/app/build.gradle中的dependencies中添加代码,如图
compile project(':RCTWeChat')
在android\app\src\main\java\com\项目名\MainApplication.java 文件中添加代码:
import com.theweflex.react.WeChatPackage; // Add this line before public class MainActivity
在27行这里添加
new WeChatPackage()
在android/app/src/main/java/com/你的项目名/里面新建一个wxapi文件夹
再在wxapi里面新建一个WXEntryActivity.java的文件
//注意第一行行改成你的 比如我的就是 com.excellents.wxapi
package com.xxx.wxapi;
import android.app.Activity;
import android.os.Bundle;
import com.theweflex.react.WeChatModule;
public class WXEntryActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WeChatModule.handleIntent(getIntent());
finish();
}
}
上述代码的第一行的 xxx 可以在android\app\src\main\java\com\项目名\MainApplication.java 文件中的第一行找到,如图的“excellents”:
(可选)继续创建一个名为“WXPayEntryActivity.java”的文件,里面的代码如下所示。 以便可以获得微信支付权限。
package com.bigcat.wxapi; //注意这一行改成nide
import android.app.Activity;
import android.os.Bundle;
import com.theweflex.react.WeChatModule;
public class WXPayEntryActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WeChatModule.handleIntent(getIntent());
finish();
}
}
在android\app\src\main里面打开AndroidManifest.xml文件,粘贴以下代码
<activity
android:name=".wxapi.WXEntryActivity"
android:label="@string/app_name"
android:exported="true"
/>
打开android\app里面的proguard-rules.pro,在最后添加如下代码
-keep class com.tencent.mm.sdk.** {
*;
}
最后可以使用以下代码测试该插件能否使用
componentDidMount(){
wechat.registerApp('你的appid').then(function(){
return wechat.openWXApp()
})
注意事项:
react-native开发我主要是在ios版本上开发,然后再来适配android版本的,所以我是先在ios上安装过react-native-wechat并且使用过的,其中在安装这个wechat插件的时候
//npm 安装
npm install react-native-wechat --save
//并且link了
react-native link react-native-wechat
所以,先在ios上安装过wechat插件的同志们你们如果想要安装wechat在android上的话,按照上面的教程一步一步来,该加的文件加了,到最后 react-native run-android你会发现报错了
实际上它是由于你之前在ios上执行过link命令导致的,而如果你从未在ios上安装过wechat插件的话,当你首次在android上使用wechat插件不受影响的时候你就放心大胆的按照以上教程来走就可以了。
解决办法
在上面众多配置项中,你会发现好几个都是在代码里添加RCTWechat的,如果你之前开发ios版本Wechat你会在你要添加代码的文件里看到还有一个react-native-wechat,这些就是你之前ios的时候link的,出来混总是要还的......... 所以在上文中涉及到让你在文件中添加RCTWechat,,,的,如果该文件有react-native-wechat的话,这个RCTWechat代码就可以省了,如下图,RCTWechat代码就不能加了,就需要屏蔽了。上面的react-native-wechat是link上的,不然就会报错咯!!!