React-Native笔记

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

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',
},
],
],
查看评论