清风逐月 | 我思故我在
2020-11-19 | UNLOCK | 更新时间:2020-12-7 16:14

ReactNative 之开发配置

连接手机安装

  • 打开手机 设置 > 更多设置 > 开发者选项 > 开启USB调试,开启USB安装
  • 打开CMD，执行 adb reverse tcp:8081 tcp:8081
  • 通过USB连接电脑，在授权确认后，选择同意后打开app
  • 摇晃手机，呼出开发者菜单后，执行Reload（Reload JS）

连接手机调试

默认情况下模拟器可以自动探测宿主机 ip 并连接，部分情况需要设置

通过USB访问服务器

(Android 5.0 及以上)可以使用 adb reverse 命令

  • adb reverse tcp:8081 tcp:8081

通过WIFI访问服务器

  • 确保电脑和手机在同一局域网下，（例如：同一WIF下或者电脑开热点），
  • 查询PC端IP （打开 CMD，执行ipconfig 查看无线局域网WLAN 2的IP)
  • 打开开发APP，摇晃手机呼出开发者菜单，点击Settings(Dev Settings) > Debug server host for device
  • 设置为IP端口（例如：192.168.0.1:8081）,设置后在开发者菜单执行Reload（Reload JS）
    正常情况应该没问题，如果出现报错，注意看报错内容

路由导航配置

从0.44版本开始,navigator就被react native剥离了核心组件库，之后推荐使用React Navigation

yarn add @react-navigation/native
yarn add @react-navigation/stack
yarn add @react-navigation/bottom-tabs
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

0.6版本 自动连接依赖库，0.6 以下请前往 ReactNavigation API 查看

在APP.js 或者 index.js 添加

import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import React from 'react';

export default function App(){
  return(
    <NavigationContainer>{/* 你APP的其他代码 */}</NavigationContainer>
  )
}

本地存储配置

官方目前不推荐使用 AsyncStorage ，官方推荐使用@react-native-community/async-storage async-storage目前有分两个版本1.x和2.x ，默认是1.x

yarn add @react-native-async-storage/async-storage

0.6版本 自动连接依赖库，0.6 以下请前往 async-storage API 查看

在js中使用async-storage

import AsyncStorage from '@react-native-async-storage/async-storage';

// async-storage仅存储字符串，如要存储对象需要转为字符串，对象中如果有函数，函数会被stringify() 方法取消掉
let str=JSON.stringify({'a':1})
AsyncStorage.setItem('day',str)

//请求key为day的数据
AsyncStorage.getItem('day').then((val)=>{
  val != null ? JSON.parse(val) : null;
})

还有一些其他方法，具体请查找API

渲染HTML页面

官方目前不推荐使用 WebView ，官方推荐react-native-webview

yarn add react-native-webview

0.6版本 自动连接依赖库，0.6 以下请前往 react-native-webview API 查看

在js中使用react-native-webview

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

// 远程网络页面
const MyWeb1=()=>{
  return(
    <WebView
      source={{ uri: 'https://infinite.red' }}
      style={{ marginTop: 20 }}
    />
  )
}
// html字符串代码
const MyWeb2=()=>{
  return(
    <WebView
      originWhitelist={['*']}
      source={{ html: '<h1>Hello world</h1>' }}
    />
  )
}

RN 的UI控件

有时候一些常见的UI控件，可以使用第三方的控件集合来保证风格的统一性

yarn add react-native-elements
yarn add react-native-vector-icons

0.6版本 自动连接依赖库，0.6 以下请前往 reactnativeelements API 查看

在js中使用组件

import { Button } from 'react-native-elements';

<Button />;

在此套UI组件中有很多组件，前往 API 查看

开发中遇到的问题

网络图片不显示

1 ： 在 Android 9以上的版本，默认是禁止一切不安全的请求，如http请求，如果图片是http请求就会白

  • 打开 android\app\src\main 目录下的 AndroidManifest.xml 添加以下代码
<application
+    android:usesCleartextTraffic="true"
 ...
>

2 : 在ReactNative中，默认是不支持SVG图片的，如果需要显示，需要引入react-native-svg

FlatList 和SectionList 卡住

当 FlatList 和 SectionList 被 ScrollView 包裹的时候，当ScrollView出现滚动条会导致内部的长列表滚动条不出现,当ScrollViw包裹ScrollView的时候一样会导致内部ScrollView卡住。

ReactNative Task :app:processDebugResources FAILED

报错：ReactNative Task :app:processDebugResources FAILED FAILURE: Build failed with an exception. What went wrong: Execution failed for task ‘:app:processDebugResources’. java.io.IOException

解决方法：在window的环境下，打开cmd执行 cd android然后执行gradlew clean

底部导航按钮点击有问题，

底部导航出现点击面小的问题，底部高50 但是点击字体和ico都没啥反应，只有点击字体底部大概那么一小点才有反应；可能是打包解析有问题。

解决方法：使用自定义tabBar定义，或者等tabBar解析成功后可以去除tabBar，

Task :app:compileDebugJavaWithJavac FAILED

安装一些第三方库的时候，会需要用到原生组件，然后当你在没有取消链接的情况下，卸载该库会导致打包出错。正确做法应该是先取消链接，在卸载第三方库包；npx react-native unlink xxx npm uninstall xxx

如果未按正确取消链接，请打开 ./android/settings.gradle 文件,删除该库引用，例如

include ':react-native-xxx' //Your library name
project(':react-native-xxx').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-abc/android-exoplayer')

打开 ./android/app/src/main/java/com/xxx/MainApplication.java 文件,删除该库引用

import com.github.wuxudong.rncharts.abc;

如果找不到要删除的包名称，或者不知道哪里出错了，可以执行以下代码，查看具体报错

cd android && gradlew clean && gradlew :app:bundleRelease

react-native