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-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://github.com/yorkie/react-native-wechat/blob/master/docs/build-setup-ios.md

IOS配置比较简单就不说了，如果报错那就按照链接多检查下。

废话不多说，直接上代码

代码实现参考https://github.com/yorkie/react-native-wechat

本人代码实现如下：

先注册appid，我在就如app的欢迎页就注册了，可以找个适当的位置注册就行

微信三方登录代码

微信登录参考官方链接

具体代码
  //微信登录授权
  WXLogin = () => {
    let scope = 'snsapi_userinfo',
      state = 'wechat_login'; //随机数，可以自己随便写
    WeChat.isWXAppInstalled().then((isInstalled) => {
      if (isInstalled) {
        WeChat.sendAuthRequest(scope, state).then(result => {
          if (result.errCode === ) {
            //获取access_token
            this.getWXAccessToken(result.code);
          }
        }).catch(() => {
        })
      } else {
        SER_URL.platform === "android" ? Toast.show("请先安装微信客户端再进行登录") :
          Toast.show("未安装微信，不能进行登录");
      }
    })
  };

  //根据微信code获取access_token
  getWXAccessToken = (token) => {
    let _URL = SER_URL.loginWXUrl + '?appid=' + SER_URL.wxAppId + '&secret='+ SER_URL.wxAppSecret + '&code=' +token+'&grant_type=authorization_code';
    fetch(_URL).then((response) => response.json()).then((result) => {
      //获取用户信息
      this.getUserInfo('weixin', result.access_token, result.openid);
    }).catch(() => {
      Toast.show("登录失败");
    });
  };

  //根据微信access_token获取微信用户信息
  getUserInfo = (type, access_token, openid) => {
    let _URL = type === 'weixin' ?
      (SER_URL.loginWXGuiUrl + '?access_token=' + access_token + '&openid=' + openid) :
      (SER_URL.loginQQUrl + '?access_token=' + access_token
          + '&oauth_consumer_key=' + SER_URL.qqAppId + '&openid=' + openid);
    fetch(_URL).then((response) => response.json()).then((data) => {
      this.showUserInfoData(type, data);
    }).catch(() => {
      Toast.show("登录失败");
    });
  };

  // 显示三方登录用户头像信息
  showUserInfoData = (type, data) => {
    switch (type) {
      case 'weixin':
        SER_URL.third_openid = data.openid;
        SER_URL.third_head_img = data.headimgurl;
        SER_URL.third_nickname = data.nickname;
        SER_URL.third_sex = data.sex;
        this.tripartiteLogin();
        break;
      case 'qq':
        SER_URL.third_head_img = data.figureurl_qq_2;
        SER_URL.third_nickname = data.nickname;
        SER_URL.third_sex = data.gender === '男' ?  : ;
        this.tripartiteLogin(, data);
        break;
      default:
        break;
    }
  };
           

微信好友、朋友圈分享代码

微信QQ所有分享集成在如下代码中，这是本人封装的，可以自己实现分封装下。
/**
 * 分享到QQ/微信
 * @param num 用于判别分享到微信还是QQ
 * @param shareId  分享id(话题id,其他默认给不传或者给)，后面用于分享跳转到页面字段
 * @param logo_url  分享图片
 * @param title 分享标题
 * @param content 分享内容
 */
function share(num, logo_url, title, content, shareId) {
  // let linkUrl = SER_URL.shareUrl + '?shareId=' + (shareId ? shareId : );
  let linkUrl = SER_URL.androidMarketUrl;
  if (num ===  || num === ) { //分享到QQ好友、QQ群、QQ空间
    //顺序不能颠倒
    QQ.isQQClientInstalled().then(() => {
      if (num === ) { //分享给QQ好友、QQ群
        QQ.shareNews(
          linkUrl,
          logo_url.indexOf('http') > - ? logo_url : resolveAssetSource(require('../images/logo_fill.png')).uri,
          title,
          content,
          QQ.shareScene.QQ).then(() => {
          Toast.show('分享成功');
        }).catch(() => {
        });
      } else if (num === ) { //分享到QQ空间
        QQ.shareNews(
          linkUrl,
          logo_url.indexOf('http') > - ? logo_url : resolveAssetSource(require('../images/logo_fill.png')).uri,
          title,
          content,
          QQ.shareScene.QQZone).then(() => {
          Toast.show('分享成功');
        }).catch(() => {
        });
      }
    }).catch(() => {
      Toast.show('未安装QQ，不能进行分享');
    });
  } else if (num ===  || num === ) {
    WeChat.isWXAppInstalled().then((isInstalled) => {
      if (isInstalled) {
        if (num === ) { //分享给微信好友、微信群
          WeChat.shareToSession({
            thumbImage: logo_url.indexOf('http') > - ? logo_url : resolveAssetSource(require('../images/logo_fill.png')).uri,
            type: 'news',
            title: title,
            description: content,
            webpageUrl: linkUrl,
          }).then(() => {
            Toast.show('分享成功');
          }).catch(() => {
          });
        } else if (num === ) { //分享到朋友圈
          WeChat.shareToTimeline({
            thumbImage: logo_url.indexOf('http') > - ? logo_url : resolveAssetSource(require('../images/logo_fill.png')).uri,
            type: 'news',
            title: title,
            description: content,
            webpageUrl: linkUrl,
          }).then(() => {
            Toast.show('分享成功');
          }).catch(() => {
          });
        }
      } else {
        Toast.show('未安装微信，不能进行分享');
      }
    });
  }
}
           

微信支付代码

具体代码
  //调用微信支付【data数据是后台传过来的，这里不在前台处理，前台处理也会不安全】
  weixinPay = async (data) => {
    if (SER_URL.isWXClientInstalled === true) {
      try {
        let result = await WeChat.pay({
          partnerId: data.partnerid.toString(), /*商家向财付通申请的商家id*/
          prepayId: data.prepayid.toString(), /*预支付订单*/
          nonceStr: data.noncestr.toString(), /*随机串，防重发*/
          timeStamp: data.timestamp.toString(), /*时间戳，防重发*/
          package: data.package.toString(), /*商家根据财付通文档填写的数据和签名*/
          sign: data.sign.toString(), /*商家根据微信开放平台文档对数据做的签名*/
        });
        if (result.errCode === ) {
          this.setState({isPay: true, successBoolean: true});
        } else {
          this.setState({isPay: true, successBoolean: false});
        }
      } catch (error) {
        this.setState({isPay: true, successBoolean: false});
      }
    } else {
      Toast.show('未安装微信，不能支付');
    }
  };
           

二、支付宝支付【待更新】

react-native-yunpeng-alipay

安卓和苹果配置：

1.http://blog.csdn.net/sinat_17775997/article/details/68484511

2.https://www.npmjs.com/package/react-native-yunpeng-alipay

支付宝有个bug:

直接按照报错的路径将这个方法删掉或者注释掉即可。不会修改的可以参考：http://blog.csdn.net/sinat_30949835/article/details/78903007

三、QQ登录、分享 react-native-qqsdk

Android、IOS配置链接https://github.com/iVanPan/react-native-qqsdk

里面IOS配置有一项：

手敲简直是蛋疼，还很容易敲错，送一波福利给各位，记得关注下哦

直接复制下面代码到Info.plist中的第一层dict里面，具体位置自己研究下

<key>LSApplicationQueriesSchemes</key>
    <array>
      <string>mqqapi</string>
      <string>mqq</string>
      <string>mqqOpensdkSSoLogin</string>
      <string>mqqconnect</string>
      <string>mqqopensdkdataline</string>
      <string>mqqopensdkgrouptribeshare</string>
      <string>mqqopensdkfriend</string>
      <string>mqqopensdkapi</string>
      <string>mqqopensdkapiV2</string>
      <string>mqqopensdkapiV3</string>
      <string>mqzoneopensdk</string>
      <string>wtloginmqq</string>
      <string>wtloginmqq2</string>
      <string>mqqwpa</string>
      <string>mqzone</string>
      <string>mqzonev2</string>
      <string>mqzoneshare</string>
      <string>wtloginqzone</string>
      <string>mqzonewx</string>
      <string>mqzoneopensdkapiV2</string>
      <string>mqzoneopensdkapi19</string>
      <string>mqzoneopensdkapi</string>
      <string>mqzoneopensdk</string>
      <string>mqqopensdkapiv4</string>
    </array>
</key>
           

QQ登录代码：

QQ登录参考链接http://wiki.open.qq.com/wiki/%E3%80%90QQ%E7%99%BB%E5%BD%95%E3%80%91get_user_info

//QQ登录授权
QQLogin = () => {
  QQ.isQQClientInstalled().then(() => {
    QQ.ssoLogin().then((result) => {
      SER_URL.third_openid = result.userid;
      this.getUserInfo('qq', result.access_token, result.userid);
    }).catch(() => {
    });
  }).catch(() => {
    SER_URL.platform === "android" ? Toast.show("请先安装QQ客户端再进行登录") :
      Toast.show("未安装QQ，不能进行登录");
  });
};
           

其中的getUserInfo方法跟微信登录里面是调用同一个getUserInfo，这里就不重新贴代码了。

QQ分享

QQ好友/群、QQ空间分享代码：代码见上面微信分享

四、极光推送【待更新】

安卓和苹果的配置：

https://github.com/jpush/jpush-react-native

https://github.com/jpush/jpush-react-native/blob/master/documents/check.md

https://github.com/jpush/jpush-react-native/blob/master/documents/android_usage.md

第二个链接中的配置如下图

上次把它配置到application外面去了就会报错

【特别注意】

① 安卓手机需要init极光推送不然接收不到消息提送

if (Platform.OS === ‘android’) JPushModule.initPush();

② 如果报cb(resultCode)错误。那就改成 cb && cb(resultCode);

其他问题后面补上