React Native 入门踩坑（Android）

最近因为业务需要，用了一波RN开发安卓移动端的App,业务场景主要是给工厂现场管理使用的，踩坑经历如下

0. 真机调试常用命令

adb devices //判断设备连接状态
adb shell input keyevent 82 //显示操作菜单

1.没有找到对应的SDK

对策：从androidStudio根目录中，复制一份local.properties到项目根目录中去就可以了（android的文件夹）

2.RN- FlatList 更新数据不刷新

<FlatList
  data={this.state.goodList}
  renderItem={this.renderItem}
  extraData={this.state} //保证state.selected变化时，能够正确触发FlatList的更新
/>

3.RN调取Android代码（参考官网，讲的很详细，就不搬运了）

https://reactnative.cn/docs/native-modules-android/

4.RN中安卓调用第三方so库

1. 工程android/app/build.gradle目录中的android属性中添加

    sourceSets {
        main {
            jniLibs.srcDirs = ['libs']
        }
    }

2.工程android/app/目录下新建libs文件夹
根据不同的CPU类型，我项目使用的是armeabi，然后我把以前路径下的so库（~\android\app\build\intermediates\transforms\mergeJniLibs\debug\0\lib\armeabi）全部复制到这个文件夹下面，还有一个文件夹armeabi-v7a也要，但里面是空的，不知道为啥删了报错

3. 可能遇到CPU位数的报错，解决是在工程android/app/build.gradle目录中defaultConfig 属性下添加如下代码

    defaultConfig {
        //限定CPU架构的so库
        ndk {
            abiFilters "armeabi"
        }
    }

5.弹出键盘时组件会上浮

6.Android向RN发送数据

Android端代码

package com.jugg;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;

import javax.annotation.Nonnull;
//获取RN上下文
public class ReactContextModule extends ReactContextBaseJavaModule {
  public static ReactContext rContext;
  public ReactContextModule(@Nonnull ReactApplicationContext reactContext) {
    super(reactContext);
    rContext = reactContext;
  }

  @Nonnull
  @Override
  public String getName() {
    return null;
  }
}
//向RN端发送数据
public void sendEventToRN(String eventName, @NonNull String params){
    ReactContextModule.rContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);
  }

RN端代码

  componentDidMount() {
    //获取安卓广播code
    this.subscription = DeviceEventEmitter.addListener('RNnotification', this.receiveBarcode)
  }

  componentWillUnmount() {//取消监听
    this.subscription.remove()
  }

7.在线预览服务端PDF

方案一：使用第三方库 react-native-pdf，官网讲的很详细
react-native-pdf 传送门

方案二：在使用方案一时候按照官网的配置遇到JAVA库调用报错，由于不大懂原生开发，可能自己的各种环境特殊，就卡住了，换了个变通的，用react-native-webview和PDF.js配合来实现（比较low）
疑问：

• PDF.js安装和使用，搬运下一个博客参考
  https://blog.csdn.net/bianliuzhu/article/details/80622215

• RN端代码

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

export default class MyWeb extends Component {
  render() {
    return (
      <WebView source={{ uri: 'http://x.x.x.x:8888/PDF.js/web/viewer.html?file=http://x.x.x.x:8888/x.pdf' }}
      />
    );
  }
}

8.谷歌浏览器中无法查看网络请求消息

对策：我是用的axios，在入口文件index.js中增加一行

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest