React-Native环境搭建、组件选择/封装、踩坑大全、IOS/Android上线【三】(持续更新)

React-Native环境搭建、组件选择/封装、踩坑大全、IOS/Android上线【三】(持续更新)

该系列文章记录本人从入门RN–>环境搭建–>熟悉组件–>使用三方组件–>解决各种坑–>封装组件–>应用上线。希望对后来者有帮助，文章将会持续更新。

---

踩坑大全

---

一、微信支付、登录、分享 React-Native-Wechat

Android配置：

配置参考链接https://github.com/yorkie/react-native-wechat/blob/master/docs/build-setup-android.md
说明：后面”整合微信支付”（Integrating the WeChat Payment)配置我的配置如下图所示【里面io.dcloud.H***是我的包名，这里对应改成自己的包名即可。当然一定要记得java目录下要建对应的文件夹。看我的建了三个文件夹分别是io、dcloud、H*** 有多少层就建多少个对应的文件夹吗，名字也记得一一对应】
如果要修改包名可以参考：https://www.jianshu.com/p/8b7412bab029
下图是 微信登录和分享 需要配置的

下图是 微信支付 需要配置的

在AndroidManifest.xml中添加权限和activity

<!-- manifest中的权限 -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!-- application里面添加微信activity -->
<!-- 微信支付需要配置的 -->
<activity
  android:name=".wxapi.WXPayEntryActivity"
  android:label="@string/app_name"
  android:exported="true"
/>
<!-- 微信分享和登录需要配置的 -->
<activity
  android:name=".wxapi.WXEntryActivity"
  android:label="@string/app_name"
  android:exported="true"
/>

在android/app/proguard-rules文件中加入下面的 混淆规则【必填】

// 混淆规则
-libraryjars libs/alipaySDK-20150602.jar
-keep class com.alipay.android.app.IAlixPay{*;}
-keep class com.alipay.android.app.IAlixPay$Stub{*;}
-keep class com.alipay.android.app.IRemoteServiceCallback{*;}
-keep class com.alipay.android.app.IRemoteServiceCallback$Stub{*;}
-keep class com.alipay.sdk.app.PayTask{ public *;}
-keep class com.alipay.sdk.app.AuthTask{ public *;}

IOS配置:

配置参考链接https://