React Native 开发常见问题及注意事项

本文只是使用时积累的一些经验

开发环境

1、Android Studio 依赖项下载慢

如果发现依赖下载非常慢，动不动十几KB的

  • 参考：加速 Android Studio 依赖项下载

  • 也可以切换数据源 修改 android/build.gradle中的jcenter()和google()

 repositories {// google()// jcenter()mavenLocal()mavenCentral()maven { url 'https://jitpack.io' }maven { url 'https://maven.aliyun.com/repository/jcenter' }maven { url 'https://maven.aliyun.com/repository/google' }maven { url 'https://maven.aliyun.com/nexus/content/groups/public' }maven { url 'https://maven.aliyun.com/nexus/content/groups/gradle-plugin' }}

2、npm install 或 yarn 很慢

主要由于 github 相关的服务在国内速度问题导致，如： canvas 安装慢、安装失败的解决方法等

- npm install 或 yarn 很慢给命令行装上楼梯

# proxyOn.batset https_proxy=http://127.0.0.1:10809
set http_proxy=http://127.0.0.1:10809
set all_proxy=socks5://127.0.0.1:10808
echo  "Proxy is on.\n"

在这里插入图片描述

- 使用国内镜像的方式加速

给 npm 提供 config 参数 --{module_name}_binary_host_mirror 可以通过镜像下载二进制文件

npm install canvas --canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas

缺点是需要在命令行中添加参数，不便于维护。

- 在 npm 配置文件中配置

可以在.npmrc (npm的配置文件) 中设置一个或多个模块的二进制文件下载镜像地址

# .npmrcregistry=https://registry.npmmirror.com
# 淘宝 NPM 镜像站切换新域名，老 npm.taobao.org 和 registry.npm.taobao.org 域名
# 于 2022 年 05 月 31 日零时起停止服务，由registry.npmmirror.com域名继续提供服务# node-sass预编译二进制文件下载地址
sass_binary_site=https://registry.npmmirror.com/-/binary/node-sass
electron_mirror=https://registry.npmmirror.com/-/binary/electron/# 无特殊配置参考{pkg-name}_binary_host_mirror={mirror}
canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas
node_sqlite3_binary_host_mirror=https://registry.npmmirror.com/-/binary/sqlite3

3、iOS 连接重置问题

如下图：iOS 安装完成后，断连了无法刷新手机设备页面白屏，连接被重置

原因：大概率是手机和Mac不在同一WiFi 网络环境下，请检查设备网络

Socket SO_ERROR [54: Connection reset by peer]

在这里插入图片描述

Text 组件

大多数情况下，建议设置 Text 的 lineHeight 样式属性。才能按照设计稿的要求将 Text 放到正确的位置上，在iOS系统中才不会出现兼容性问题。

如果需要设置背景颜色和圆角，建议外层再加一层 View ，不要直接在 Text 组件本身上面设置，因为在 iOS 系统上Text 组件的圆角样式会失效。

Text 是可以嵌套的，这对于需要在同一行文字中，设置不同的大小颜色等，是非常有用的。内层文字会继承外层文字的样式。

<Text style={{ lineHeight: 20, fontSize: 14, color: '#333333' }}>同意<Text style={{ color: '#448AFF' }}>《协议》</Text>！
</Text>

fontWeight 属性可以设置粗体。但是设置为数值时，只对 iOS 生效。

所有显示内容都需要 <text>内容</text> 进行包裹，否则会报错

Text 吞字现象

当你发现，设置了 fontWeight: 'bold'，但在部分 Android 手机上，却看不到粗体的效果
那么很有可能发生了吞字现象。Text 组件文字显示不全

当 Text 中的文本同时符合以下两个条件时，在部分 Android 手机上会出现文字显示不全的问题。

  • 含有半角字符（数字、字母、空格、特殊符号）
  • style 设置了 fontWeight 属性，不管它的值是什么

解决参考：https://juejin.cn/post/7127811778620162078

View 组件

View 通常作为容器使用，熟练使用 flexbox 布局，可以让 UI 层级更加简洁。

Flexbox 布局

使用 Flexbox 布局：https://reactnative.cn/docs/flexbox#flex

在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。

一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。

React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值为column（而不是row），alignContent默认值为 flex-start（而不是 stretch）, flexShrink 默认值为0 （而不是1）, 而flex只能指定一个数字值。

onLayout 获取 View 的位置和大小

这个在列表组件中弹窗很有用
在这里插入图片描述

@react-native-community/hooks 这个包提供了一个方便的 Hook 来帮助我们获取这些信息。

 import { useLayout } from '@react-native-community/hooks'function MyComponent() {const { x, y, width, height, onLayout } = useLayout()return <View onLayout={onLayout} />}

Style 样式问题

在 React Native，也会遭遇 1px 分割线的问题，不同的设备上，直接使用 1 px 可能会出现粗细不一样的线

React Native 提供了一个常量来解决这个问题：StyleSheet.hairlineWidth。这个常数将总是一个整数的像素（所以由它定义的线看起来很清晰），并将试图匹配底层平台上细线的标准宽度。

PixelRatio 工具类有个 roundToNearestPixel 方法，可以将数值转换为最接近的整数像素。

如果你发现两个 View 之间有间隙，总是合不拢或者有的粗有的细，就可以尝试使用这个方法。

这个也不是一定可解决的

TextInput 组件

多行文本与顶部对齐

当将 multiline 设置为 true 时，在 iOS 上，文本会与顶部对齐，而在 Andriod 上，则保持垂直居中。需要将 textAlignVertical 设置为 top，才能保持两个平台的表现一致。

在 Android 上，在垂直方向上会有默认的 padding，多行文本下，为了保持两个平台的表现一致，需要将 padding 样式属性设置为 0 或适当的值。

为了保证不同平台的一致性，最好涉及Text 、TextInput 时设置行高lineHeight

两个外层边距保持平行

输入框 borderRadius 内外如果都设置为 12 看上去就边角出就不是平行的

在这里插入图片描述
内层的 borderRadius 的值 = 外层的 borderRadius 值 - 两者之间的边距

这样就是平行的了，看上去就会美观很多

在这里插入图片描述

Modal 组件

  • React-Native Modal组件中无法按返回键隐藏

  • React Native将 ipad 端软件设置为横屏显示后关闭 Modal 弹窗报错

热更新

https://pushy.reactnative.cn/docs/faq

1、哪些修改可以热更新？哪些不能？

我们把对应用的修改分为两类：

不可热更新 —— 原生修改，即所有需要编译后才能生效的修改：

  • 任何在 iOS 或者 Android 目录中的修改、增删。
  • 任何含有原生代码的第三方组件的更新、修改。

可以热更新 —— 非原生修改，即所有无需编译，刷新即可生效的修改：

  • js 代码修改，包括第三方纯 js 组件的更新、修改。
  • 可以在 js 代码中 require/import 的资源文件，例如图片。

需要注意的是，即便资源文件可以热更新，但这些热更新后的资源文件会以file://协议的形式提供访问，某些读取资源文件的第三方可能并不支持file://协议。

2、热更新成功完成，但是重启后又回滚了是怎么回事？

可以正常更新，但是重启后回滚，一般是没有正确配置 bundleUrl

3、热更新报错：“热更新已暂停，原因：编译时间戳与服务器记录不一致”

当您每次编译产生一个原生包时，其中都会记录一个编译时间戳buildTime(可以使用pushy parseIpa a.ipa或是pushy parseApk a.apk命令来查看)。如果您需要把这个包发给客户并希望使用热更新功能，那么就需要使用 upload 命令来上传到我们的服务器，而服务器端会记录这个包的版本号和编译时间戳以便后续比对记录。

调试日志

通过参数控制输出的数据和格式，灵活应用它会大大提高我们的工作效率。

1、console.log

console.log(url, url2, baz)
// 对比 
console.log({ url, url2, baz })
// 在日志前加上唯一字符串前缀
console.log('debug-log', { url, url2, baz })

在这里插入图片描述

在日志前加上唯一字符串前缀是很有用的。这样可以更容易地在控制台中搜索和过滤日志。

在这里插入图片描述

2、JSON.stringify

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

语法
JSON.stringify(value[, replacer [, space]])
参数
value
将要序列化成 一个 JSON 字符串的值。
replacer 可选
如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。

space 可选
指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于 1，则意味着没有空格；如果该参数为字符串（当字符串长度超过 10 个字母，取其前 10个字母），该字符串将被作为空格；如果该参数没有提供（或者为 null），将没有空格。

  let list = {listObj: [{ name: '张三', age: 18 },{ name: '李四', age: 20 },{ name: '王五', age: 22 },{ name: '赵六', age: 24 },]}console.log('====================================')console.log(JSON.stringify(list))console.log('====================================')console.log(JSON.stringify(list, null, 1))console.log('====================================')console.log(JSON.stringify(list, null, 10))console.log('====================================')

在这里插入图片描述

在这里插入图片描述

  const dataArr = [{name: "person1",sex: 0,age: 18,isStudent: true},{name: "person2",sex: 1,age: 25,isStudent: false},{name: "person3",sex: 0,age: 15,isStudent: true}]

  console.log('====================================')console.log(JSON.stringify(dataArr, ['name'], 1))console.log('====================================')const res = JSON.stringify(dataArr,(key, value) => {if (key == 'sex') {return ["女", '男'][value];}return value;},2)console.log(res);

只输出姓名

在这里插入图片描述

将性别转为中文字符

在这里插入图片描述

待续。。。

其他

如果是作为初学者，建议先看官方文档，至少通读一遍，做聪明人下笨功夫，要有 遍历精神

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/36982.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

人脑计算机技术与Neuroplatform：未来计算的革命性进展

人脑计算机技术与Neuroplatform：未来计算的革命性进展

引言 想象一下&#xff0c;你在某个清晨醒来&#xff0c;准备开始一天的工作&#xff0c;而实际上你的大脑正作为一台生物计算机的核心&#xff0c;处理着大量复杂的信息。这并非科幻电影的情节&#xff0c;而是人脑计算机技术即将带来的现实。本文将深入探讨FinalSpark公司的…
阅读更多...
【BFS】【并查集】个人练习-Leetcode-815. Bus Routes

【BFS】【并查集】个人练习-Leetcode-815. Bus Routes

题目链接&#xff1a;https://leetcode.cn/problems/bus-routes/description/ 题目大意&#xff1a;给出一系列公交车路线routes[][]&#xff0c;每条路线上有一系列车站&#xff0c;可以搭乘同一班公交车经过这些车站。给出起点车站和终点车站&#xff0c;求最小的需要搭乘的…
阅读更多...
选择适合你的8款原型设计工具

选择适合你的8款原型设计工具

随着互联网的飞速发展&#xff0c;设计行业逐渐成为近年来的热门职业。设计师们需要的掌握的技能也越来越多&#xff0c;例如海报设计、名片设计、产品设计、网页设计等。产品原型设计就是产品设计中非常重要的一个阶段&#xff0c;主要目的是帮助用户更容易了解产品设计的思路…
阅读更多...
深度学习 —— 1.单一神经元

深度学习 —— 1.单一神经元

深度学习初级课程 1.单一神经元2.深度神经网络3.随机梯度下降法4.过拟合和欠拟合5.剪枝、批量标准化6.二分类 前言 本套课程仍为 kaggle 课程《Intro to Deep Learning》&#xff0c;仍按之前《机器学习》系列课程模式进行。前一系列《Keras入门教程》内容&#xff0c;与本系列…
阅读更多...
impdp导入数据ORA-39142: 版本号 5.1不兼容错误

impdp导入数据ORA-39142: 版本号 5.1不兼容错误

impdp导入数据ORA-39142: 版本号 5.1不兼容错误 1、错误现象 Import: Release 12.1.0.1.0 - Production on 星期三 6月 26 17:07:49 2024Copyright (c) 1982, 2013, Oracle and/or its affiliates. All rights reserved.连接到: Oracle Database 12c Enterprise Edition Rel…
阅读更多...
基于FLAC3D的边坡稳定性动力分析——地震工况

基于FLAC3D的边坡稳定性动力分析——地震工况

基于FLAC3D的边坡稳定性动力分析——地震工况 参考张迎宾教授的文章——论文复现 Paper : Numerical Simulation of Seismic Slope Stability Analysis Based on Tension-Shear Failure Mechanism new config dyn set dynamic off restore zhang.sav def velE=77.88e6mu=0.3…
阅读更多...
记录一个问题

记录一个问题

问题描述 如果一个物料既在A总成零件号下计算为托盘库&#xff0c;在B总成零件号下计算为箱库&#xff0c;则放于箱库。 A中选择排名第21的递补进托盘库。&#xff08;也需要判断递补的是否在其他总成零件中为箱库&#xff0c;是的话继续递补判断&#xff09; 解决思路 为了…
阅读更多...
13018.CUDA工程配置GDB调试

13018.CUDA工程配置GDB调试

文章目录 1 工程CMakeLists.txt2 vscode配置launch.json,settings.json,tasks.json文件 1 工程CMakeLists.txt cmake_minimum_required(VERSION 3.8) # 根据你的CMake版本调整 # 设置项目名称 project(ez_compower_upward VERSION 0.1 LANGUAGES CXX CUDA)find_package(CUDA …
阅读更多...
【机器学习】Whisper：开源语音转文本（speech-to-text）大模型实战

【机器学习】Whisper：开源语音转文本（speech-to-text）大模型实战

目录 一、引言 二、Whisper 模型原理 2.1 模型架构 2.2 语音处理 2.3 文本处理 三、Whisper 模型实战 3.1 环境安装 3.2 模型下载 3.3 模型推理 3.4 完整代码 3.5 模型部署 四、总结 一、引言 上一篇对​​​​​​​ChatTTS文本转语音模型原理和实战进行了讲解&a…
阅读更多...
【语义分割系列】基于cityscape的DDRNet算法

【语义分割系列】基于cityscape的DDRNet算法

基于cityscape的DDRNet算法 前言 DDRNet是专门为实时语义分割设计的高效主干。该模型由两个深度分支组成，在这两个分支之间执行多次双边融合，并且还设计了一个新的上下文信息抽取器，名为深度聚合金字塔池模块（DAPPM），用于扩大有效的接受域，并基于低分辨率特征映射融合…
阅读更多...
计算机网络——数据链路层（数据链路层概述及基本问题）

计算机网络——数据链路层（数据链路层概述及基本问题）

链路、数据链路和帧的概念 数据链路层在物理层提供服务的基础上向网络层提供服务&#xff0c;其主要作用是加强物理层传输原始比特流的功能&#xff0c;将物理层提供的可能出错的物理连接改造为逻辑上无差错的数据链路&#xff0c;使之对网络层表现为一条无差错的链路。 链路(…
阅读更多...
Steam夏促史低游戏推荐 Steam夏促哪有游戏值得入手

Steam夏促史低游戏推荐 Steam夏促哪有游戏值得入手

steam夏季促销来袭&#xff0c;有这很多的游戏都进行打折出售&#xff0c;而且还有这很多的游戏都迎来了史低&#xff0c;简直是白送&#xff0c;很多玩家都想趁着这个时间入手自己喜欢的游戏&#xff0c;为了方便大家了解&#xff0c;下面我给大家带来steam夏季促销史低的游戏…
阅读更多...
CO-DETR利用coco数据集训练和推理过程

CO-DETR利用coco数据集训练和推理过程

CO-DETR利用coco数据集训练和推理过程&#xff0c;参考链接 Co-DETR训练自己的数据集 文章目录 前言训练过程推理过程总结 前言 环境&#xff1a;PyTorch 1.11.0 Python 3.8(ubuntu20.04) Cuda 11.3 先是在github上下载CO-DETR模型 !git clone https://github.com/Sense-X/Co…
阅读更多...
[C++深入] --- vector容器浅析

[C++深入] --- vector容器浅析

vector是一个封装了动态大小数组的顺序容器，它能够存放各种类型的对象。 可以删除元素、可以插入元素、可以查找元素，做这些工作我们无需管理容器内存。容器内存管理，这种脏活累活全部交由vector管理。了解一下vector的内存管理策略，能够更加充分的利用内存。 1 vector内存…
阅读更多...
陌陌笔试--并发打印文件内最有钱的老板的消费金额(算法)

陌陌笔试--并发打印文件内最有钱的老板的消费金额(算法)

题目&#xff1a; 算法中需要打印消费前十老板的消费金额&#xff0c;解决保留两位小数&#xff0c;并发是 JAVA 中的常考题&#xff0c; 我这里简单模拟下了数据&#xff0c;关键数据是用户id和消费金额。 解题思路&#xff1a; 1. 最简单的思路是单线程&#xff0c;偷懒…
阅读更多...
【面试系列】Go 语言高频面试题

【面试系列】Go 语言高频面试题

欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;欢迎订阅相关专栏&#xff1a; ⭐️ 全网最全IT互联网公司面试宝典&#xff1a;收集整理全网各大IT互联网公司技术、项目、HR面试真题. ⭐️ AIGC时代的创新与未来&#xff1a;详细讲解AIGC的概念、核心技术、…
阅读更多...
狂神说Java之 rabbitmq高级分布式事务

狂神说Java之 rabbitmq高级分布式事务

分布式事务的完整架构图 案例场景分析 案例一&#xff1a;用RestTemplate演示&#xff08;不可靠生产&#xff0c;会出现问题&#xff09; 创建一个订单模块 创建一个OrderDataBaseService服务 创建一个order的service服务&#xff0c;调用saveOrder()方法 创建一个运单模块…
阅读更多...
2024.06.20校招 实习 内推 面经

2024.06.20校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流*裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 速腾聚创 RoboSense“天才罗伯特”计划面向全球招募 &#xff08;内推&#xff09; 校招 | 速腾聚创 RoboSense“天才罗伯特”计划面向全球招募 &#xff08;内推&#xff09; …
阅读更多...
java.util.function实现原理和Java使用场景【Function、Predicate集合转换过滤，BiConsumer事件处理】

java.util.function实现原理和Java使用场景【Function、Predicate集合转换过滤，BiConsumer事件处理】

简介 java.util.function 是 Java 8 引入的一个功能包，它包含了多种函数式接口的定义，使得在 Java 中进行函数式编程变得更为方便。下面我将分别介绍 java.util.function 的作用、实现原理、常用 Java 使用场景以及代码示例。 作用 java.util.function 的主要作用是为 Jav…
阅读更多...
Java导出Excel并邮件发送

Java导出Excel并邮件发送

一、导出Excel 添加maven依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>3.10-FINAL</version></dependency><dependency><groupId>org.apache.poi</groupI…
阅读更多...
最新文章

Copyright @ 2022~2023