ReactNative - 开发笔记

一月 07, 2020 3199

关于React-Native的一些记录和总结。

插件

踩坑记录

本地请求失败

在请求本地服务器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标题在安卓上默认显示在左边，想在左边做一个回退按钮，按照官方文档设置了标题居中，并没有起效果。解决方案如下：

static navigationOptions = { 
	headerTitleStyle:{
		flex: 1,
		textAlign: 'center',
	}, 
}

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

打包无法联网

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

  1. 在/src/main/res创建network_security_config.xml文件，内写代码：

    	 <?xml version="1.0" encoding="utf-8"?>
    <network-security-config>
    	<base-config cleartextTrafficPermitted="true" />
    </network-security-config>

  2. 在/src/main/androidManifest.xml加入如下代码：

    <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中添加以下代码：

    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中添加以下代码：

    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即可。

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

获取方法如下:

$ cd ./android/app

可以看到 debug.keystore 和 release.keystore 签名文件。（具体文件名可能不同）

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

开发版sha1

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

发布版sha1 同理:

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