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.bat

set 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的配置文件) 中设置一个或多个模块的二进制文件下载镜像地址

# .npmrc

registry=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.mfbz.cn/a/753648.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[图解]SysML和EA建模住宅安全系统-02-现有运营领域-块定义图

[图解]SysML和EA建模住宅安全系统-02-现有运营领域-块定义图

1 00:00:00,840 --> 00:00:02,440 首先我们来看画在哪里 2 00:00:02,570 --> 00:00:08,310 你看&#xff0c;这是图的类型&#xff0c;图里面内容 3 00:00:08,320 --> 00:00:10,780 这是元素类型 4 00:00:10,790 --> 00:00:14,900 这是位置&#xff0c;哪个包 …
阅读更多...
鸿蒙开发 之 健康App案例

鸿蒙开发 之 健康App案例

1.项目介绍 该项目是记录用户日常饮食情况&#xff0c;以及针对不同食物摄入营养不同会有对应的营养摄入情况和日常运动消耗情况&#xff0c;用户可以自己添加食品以及对应的热量。 1.1登陆页 1.2饮食统计页 1.3 食物列表页 2.登陆页 2.1自定义弹框 import preferences from oh…
阅读更多...
当用户需求不详细时，如何有效应对

当用户需求不详细时，如何有效应对

在项目沟通时&#xff0c;用户对需求说明不详细&#xff0c;可能是由于多种原因。以下是一些可能的原因及如何应对这些问题的建议&#xff1a; 1. 用户不完全理解自己的需求 原因&#xff1a; 用户对技术细节不了解&#xff0c;不知道如何具体描述需求。 用户对项目的全局和…
阅读更多...
支持WebDav的网盘infiniCloud（静读天下，Zotero 等挂载）

支持WebDav的网盘infiniCloud（静读天下，Zotero 等挂载）

前言 WebDav是一种基于HTTP的协议&#xff0c;允许用户在Web上直接编辑和管理文件&#xff0c;如复制、移动、删除等。 尽管有一些网盘支持WebDav&#xff0c;但其中大部分都有较多的使用限制。这些限制可能包括&#xff1a;上传文件的大小限制、存储空间的限制、下载速度的限…
阅读更多...
met和set的特性及区别

met和set的特性及区别

1、关联式容器 在c初阶阶段&#xff0c;我们已经接触了STL的部分容器&#xff0c;比如&#xff1a;vector,list,deque&#xff0c;forward_list等。 这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面存储的就是数据本身。 而关联式容器…
阅读更多...
Qt的入门

Qt的入门

Qt的入门 1.Qt的配置2.介绍Qt的使用2.1 Qt 5.14.22.2 Linguist 5.14.22.3Designer 5.14.22.4 Assistant 5.14.22.5 Qt Creator 4.11.1 3.创建第一个项目3.1点击文件来新建一个新的文件或项目3.2选择项目路径和名称3.3选择构建工具3.4类信息3.5翻译文件3.6选择编译器3.7项目管理…
阅读更多...
Redis 内存碎片是什么？如何清理？

Redis 内存碎片是什么？如何清理？

Redis 内存碎片相关的问题在得物、美团、阿里、字节、携程等公司的后端面试中都曾出现过&#xff0c;还是建议认真准备一下。即使不是准备面试&#xff0c;日常开发也是能够用到的&#xff01; 什么是内存碎片? 你可以将内存碎片简单地理解为那些不可用的空闲内存。 举个例子&…
阅读更多...
Python文件匹配技巧详解

Python文件匹配技巧详解

概要 在日常的文件操作和数据处理中，文件匹配是一个非常常见的任务。Python 提供了丰富的库和工具来实现文件匹配，这些工具不仅功能强大，还易于使用。本文将详细介绍如何使用 Python 实现文件匹配，包括基本的文件操作、通配符匹配、正则表达式匹配以及实际应用场景，帮助更…
阅读更多...
NewspaceGPT带你玩系列之美人鱼图表(思维导图)

NewspaceGPT带你玩系列之美人鱼图表(思维导图)

目录 注册一个账号&#xff0c;用qq邮箱&#xff0c;然后登录选一个可用的Plus&#xff0c;不要选3.5探索GPT今天的主角是开始寻梦美人鱼图表我选第四个试一下问答 自定义问题&#xff1a;问答叙述文六要素&#xff1a;示例&#xff1a; 结论关注我&#xff0c;不迷路&#xff…
阅读更多...
服务器安装JDK，Maven等常用环境

服务器安装JDK，Maven等常用环境

生产环境部署服务器需要安装一些常用工具&#xff0c;下面我就把常用的jdk&#xff0c;maven&#xff0c;node&#xff0c;git的安装方法和步骤演示 一、安装JDK环境 执行如下命令&#xff0c;安装JDK,所有命令都是 复制&#xff0c;粘贴&#xff0c;回车 yum install -y jav…
阅读更多...
vue uniapp MEQX JWT认证

vue uniapp MEQX JWT认证

1.下载依赖 npm install mqttimport * as mqtt from "mqtt/dist/mqtt.min" ​ 我是用的uniapp vue3 vite这里尝试了很多方式,都导入不进去后来我就采用的本地引入方式, 把mqtt.min.js下载到本地然后在index.html 中导入<script src"./MEQX/mqtt.js" typ…
阅读更多...
同三维T908转换器 SDI转DVI/HDMI/VGA/色差分量/AV转换器

同三维T908转换器 SDI转DVI/HDMI/VGA/色差分量/AV转换器

同三维T908转换器 SDI转DVI/HDMI/VGA/色差分量/AV转换器 1路SDI进&#xff0c;1路DVI(可转HDMI/VGA/色差分量/AV)3.5音频1路SDI出,可以支持音频解嵌&#xff0c;也可把3.5音频加嵌转换输出&#xff0c;输出分辨率可调&#xff0c;支持图像翻转180度 一、产品简介 SDI转万能转…
阅读更多...
新能源行业必会基础知识-----电力市场概论笔记-----经济学基础

新能源行业必会基础知识-----电力市场概论笔记-----经济学基础

新能源行业知识体系-------主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/139946830 目录 1. 什么是市场2. 电力市场机制设计的基本要求 1. 什么是市场 经济学定义 市场是供需双方交易并决定商品价格和产量的机制市场可…
阅读更多...
【阅读论文】-- IDmvis：面向1型糖尿病治疗决策支持的时序事件序列可视化

【阅读论文】-- IDmvis：面向1型糖尿病治疗决策支持的时序事件序列可视化

IDMVis: Temporal Event Sequence Visualization for Type 1 Diabetes Treatment Decision Support 摘要1 引言2 1 型糖尿病的背景3 相关工作3.1 时间事件序列可视化3.2 电子健康记录可视化3.3 1 型糖尿病可视化3.4 任务分析与抽象 4 数据抽象5 层次化任务抽象5.1 临床医生工作…
阅读更多...
华为BGP路由实验基础1------用物理口建立对等体

华为BGP路由实验基础1------用物理口建立对等体

1.用物理口做BGP建立对等体建立BGP连接 实验拓扑&#xff1a; 实验步骤&#xff1a; 1.完成基本配置 sys [Huawei]sys AR1 [AR1]undo in e [AR1]int g0/0/0 [AR1-GigabitEthernet0/0/0]ip add 1.1.1.1 24 [AR1-GigabitEthernet0/0/0]q [AR1] sys [Huawei]sys AR2 [AR2]undo i…
阅读更多...
用自己电脑部署大模型，私有化，很香！

用自己电脑部署大模型，私有化，很香！

这段时间一直在研究大语言模型私有部署的相关内容&#xff0c;相信大家也非常的感兴趣。 到目前为止&#xff0c;其实还是有很多的开源模型&#xff0c;其实大家去 GitHub Trending 上看看&#xff0c;就能够发现很多。 今天也是手把手地教大家怎么在自己的电脑上部署一个大语…
阅读更多...
Qt—贪吃蛇项目（由0到1实现贪吃蛇项目）

Qt—贪吃蛇项目（由0到1实现贪吃蛇项目）

用Qt实现一个贪吃蛇项目 一、项目介绍二、游戏大厅界面实现2.1完成游戏大厅的背景图。2.2创建一个按钮&#xff0c;给它设置样式&#xff0c;并且可以跳转到别的页面 三、难度选择界面实现四、 游戏界面实现五、在文件中写入历史战绩5.1 从文件里提取分数5.2 把贪吃蛇的长度存入…
阅读更多...
如何断点调试opencv源码

如何断点调试opencv源码

分几个步骤&#xff1a; 1、下载opencv-4.10.0-windows.exe https://opencv.org/releases/ 2、想要调试opencv的源码&#xff0c;只需要将这两个文件拷贝到我们自己项目的可执行文件的同级目录内即可。 完成拷贝后&#xff0c;直接在vs工程中打断点F11进行单步调试&#xff…
阅读更多...
ASP.NET MVC-简单例子-配置日志文件-log4net

ASP.NET MVC-简单例子-配置日志文件-log4net

环境&#xff1a; win10&#xff0c;SQL Server 2008 R2 安装 使用NuGet 安装时发现报错并无法安装&#xff1a; 现有 packages.config 文件中检测到一个或多个未解析包依赖项约束。必须解析所有依赖项约束以添加或更新包。如果正在更新这些包&#xff0c;则可忽略此消息&am…
阅读更多...
2024-6-28 石群电路-32

2024-6-28 石群电路-32

2024-6-28&#xff0c;星期五&#xff0c;20:05&#xff0c;天气&#xff1a;雨&#xff0c;心情&#xff1a;晴。今天没有什么事情发生&#xff0c;继续学习&#xff0c;加油&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 1. 对称三相电路的计算&#xff08…
阅读更多...
最新文章

Copyright @ 2022~2023