ReactNative - 开发笔记

插件

踩坑记录

本地请求失败

在请求本地服务器http://127.0.0.1:7001的时候怎么也访问不到。后来才了解到原来使用Android Studio虚拟机,需要访问http://10.0.2.2:28080,相当于开了两台局域网主机嘛。

Axios (in React-native) not calling server in localhost

Axios doesn’t work with Android (emulator) raising a Network Error

导航标题不居中

react-navigation标题在安卓上默认显示在左边,想在左边做一个回退按钮,按照官方文档设置了标题居中,并没有起效果。解决方案如下:

1
2
3
4
5
6
static navigationOptions = { 
headerTitleStyle:{
flex: 1,
textAlign: 'center',
},
}

react-navigation 标题在安卓上不居中问题

打包无法联网

安卓9开始需要添加配置才能开启联网权限。解决方案如下:

  1. /src/main/res创建network_security_config.xml文件,内写代码:

    1
    2
    3
    4
    	 <?xml version="1.0" encoding="utf-8"?>
    <network-security-config>
    <base-config cleartextTrafficPermitted="true" />
    </network-security-config>
  2. /src/main/androidManifest.xml加入如下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:networkSecurityConfig="@xml/network_security_config" //Add
    android:roundIcon="@mipmap/ic_launcher_round"
    android:allowBackup="false"
    android:theme="@style/AppTheme">

react native 0.595 在安卓9.0版 release包无法联网

支付宝开启沙箱

开发支付业务时用到的第三方封装支付宝插件,但是没有集成沙箱环境,按以下方式集成。

  1. android/src/main/java/com/reactlibrary/AlipayModule.java中添加以下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    package com.reactlibrary;

    import com.alipay.sdk.app.EnvUtils; //Add
    import com.alipay.sdk.app.H5PayCallback;
    import com.alipay.sdk.util.H5PayResultModel;
    import com.alipay.sdk.app.AuthTask;

    public void run() {
    thread.start();
    }

    // Add
    @ReactMethod
    public void setAlipaySandbox(Boolean isSandbox) {
    if(isSandbox){
    EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX);
    }else {
    EnvUtils.setEnv(EnvUtils.EnvEnum.ONLINE);
    }
    }

    @ReactMethod
    public void pay(final String orderInfo, final Promise promise) {
    Runnable runnable = new Runnable() {
  2. index.d.ts中添加以下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    function authWithInfo(infoStr: string): IResult;

    // Add
    function setAlipaySandbox(isSandbox: boolean): void

    function pay(infoStr: string): IResult;

    function payInterceptorWithUrl(infoStr: string): {

add sandbox

组件导入相对路径配置

安装并配置插件babel-plugin-root-import即可。

1
2
3
4
5
6
7
8
9
10
yarn add babel-plugin-root-import    // 下载插件

plugins: [ // 加入 babel.config.js 配置
[
'babel-plugin-root-import',
{
rootPathSuffix: 'src',
},
],
],

获取sha1

在使用 react-native-baidu-map 过程中,发现 reverseGeoCode 等一些功能无法使用,且在RN控制台没有报错。

后来在 Android Studio 打包时发现原生模块报错,原来是 百度地图SKD 中的 开发版sha1发布版sha1 没有配置正确。

百度地图bug

获取方法如下:

1
$ cd ./android/app

可以看到 debug.keystorerelease.keystore 签名文件。(具体文件名可能不同)

1
keytool -list -v -keystore debug.keystore  #获取开发版sha1

开发版sha1

提示 输入秘钥库密码 ,直接回车,即可获取 开发版sha1

发布版sha1 同理:

1
keytool -list -v -keystore release.keystore  #获取发布版sha1
查看评论