1,View,UI的构建基石

四个方向,水平,水平倒序,垂直,垂直倒序
flexGrow与flex的区别,flexgrow是分父布局剩余的空间,flex是分父布局全部的空间
在这里插入图片描述
上面的是flexgrow 123
下面的是flex 123
设置了flex后,width会失效
在这里插入图片描述
margin padding height width都可以用百分比, borderwidth不能用百分比

在这里插入图片描述
上述代码,position:'absolute’和left:30必须连用,才不受父布局影响,如果去掉left:30,那么父布局的alignItems将生效
主轴与top/bottom关系同理。

onLayout返回该组件在父布局中的位置,onLayout的参数有一个event,event中有一个nativeEvent,nativeEvent如下
在这里插入图片描述
当宽高位置发生变化后,会回调onLayout方法,如下图代码所示
在这里插入图片描述
onLayout的用法,动态获取宽高

在这里插入图片描述
如果组件的属性,比如宽高等使用useState更新,会导致界面的重绘。
而,setNativeProps不会
在这里插入图片描述

Text组件

1,text 的fontsize最好是双数
2,text的fontweight,在Android中,小于500的是normal,大于500的是bold,安卓中只有这两种情况
3,fontFamily:字体无法用代码创建,对应的是一个文件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
上面是正常的字体,下面的是CustomFont字体。

一般情况下,我们不会自定义汉字字体,因为汉字有几万个,用的比较多的是数字字体
4,在这里插入图片描述
在这里插入图片描述
5,在这里插入图片描述
Text默认是无法选中的,如果想选中,如下设置在这里插入图片描述

6,在这里插入图片描述
可以不包裹Pressable
在这里插入图片描述

7,在这里插入图片描述
8,文字嵌套
在这里插入图片描述
嵌套文字不支持margin和padding属性

9,在这里插入图片描述

textAlign是水平,textAlignVertical是垂直

10,在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
solid表示实线,安卓中只支持solid
11,在这里插入图片描述
在这里插入图片描述
三个属性要一起使用,注意textShadowRadius,它的意思是虚化。最好不要太小,比如1

三:Image

1,本地图片
在这里插入图片描述
2,网络图片
在这里插入图片描述
3,缩放模式,图片宽高和Image宽高不是等比的时候生效
在这里插入图片描述

contain:等比例拉伸,直到宽或高和组件大小一样

center:如果组件比图片大,不做改动,如果组件比图片小,图片缩放
cover:宽和高都适配
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
stretch:不保持比例的拉伸
在这里插入图片描述

5,在这里插入图片描述
在这里插入图片描述
6,在这里插入图片描述
在这里插入图片描述
debug情况下,defaultSource是不显示的,release显示
7,在这里插入图片描述
8,在这里插入图片描述
在这里插入图片描述
打印输出如下
在这里插入图片描述

9,在这里插入图片描述
如果加载失败,只会回调onLoadStart,不会回调onLoadEnd

10,在这里插入图片描述
在这里插入图片描述
png图片有透明通道,它在着色的时候,会覆盖所有的非透明区域
11,在这里插入图片描述
这是命令式UI,需要使用useRef
在这里插入图片描述
在这里插入图片描述
prefetch是通过Promise的方式回调。多用在加载一个大的图片,可以存在本地磁盘,下一次加载会快

四ImageBackground = View+Image

ImageBackground集成了View的布局功能和Image的加载图片功能。

在这里插入图片描述
可以看见,ImageBackground有两个style ,一个是加载布局样式,一个是加载图片样式。
在这里插入图片描述
在这里插入图片描述
它有ref和imageRef两个实行

TextInput:React Native唯一的输入框

1,拥有Text的大部分属性,比如fontSize,下划线等。
2,在这里插入图片描述
autoFocus为true的时候,界面加载成功会自动聚焦,同时弹出键盘,
如果用api命令的方式调用,就需要focus()+useRef
在这里插入图片描述
两秒钟后,输入框聚焦,同时弹出键盘
3,在这里插入图片描述
在这里插入图片描述
blurOnSubmit默认为true,点击提交按钮后,键盘会隐藏,同时失去焦点。如果设置为false,则不会。
在这里插入图片描述
用api控制失去焦点,上述代码两秒后失去焦点同时隐藏键盘
4,在这里插入图片描述
当为true的时候,可以继续输入文字,但不会有光标。
5,在这里插入图片描述
在这里插入图片描述
加载界面后,默认就会有文字
6,在这里插入图片描述
当该值为false的时候,不能输入文字,不会获得焦点,不会弹出键盘
7,在这里插入图片描述
上面列出的属性,就是Android和IOS都支持的属性,其它属性还有很多,但不是双平台都支持。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
8,在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
还有很多属性,这里就不列出了
9,在这里插入图片描述
10,在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
numberOfLines是显示几行,如果是2,无论你输入多少内容都只显示两行

11在这里插入图片描述
在这里插入图片描述
12,在这里插入图片描述
在这里插入图片描述
onChange拿到的内容多,onChangeText只拿到文本。
13,在这里插入图片描述
在这里插入图片描述
左闭右开
在这里插入图片描述
替换之前的输入内容,场景:比如有一个搜索框,第一次搜索了,第二次在输入搜索内容后,前一次的输入内容会全部被选中,再输入的时候会清空TextInput

14,在这里插入图片描述
15,在这里插入图片描述
注意,该属性与multiline={true}连用的时候会失效

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/920987.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/920987.shtml
英文地址,请注明出处:http://en.pswp.cn/news/920987.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Git 代码提交管理指南

目录 1. 初始设置(首次使用 Git 时) 2. 日常提交工作流程 场景一:已有本地项目,首次连接到远程仓库 场景二:已有远程仓库,克隆到本地 3. 更精细的文件管理 4. 提交信息规范 5. 分支管理策略 6. 高级…

go-mapus最简单的离线瓦片地图协作

基于leaflet.jsleaflet-geoman.jsgolangbeegogormsqlitewebsocket等实现一个最简单的地图协作。绘制图元,其他用户浏览器上实施显示绘制和修改结果,大家可同步进行绘制和修改。设置线型和颜色,粗细和透明度。保存到sqlite数据库。动画演示地图…

调式记录之八位机软件串口

现在在上班,做的项目几乎都是关于八位机的,八位机有个挺CD的点硬件资源少,打印之类的需要软件串口,有时候调的刚到很玄学,也有可能是我知识没有学得恨透。首先我得需要发送这句话并在代码里面设置我的延时时间&#xf…

嵌入式学习day40-硬件(1)

嵌入式:以应用为中心:消费电子(手机、蓝牙耳机、智能音响)、医疗电子(心率脉搏、呼吸机)、无人机(大疆DJ)、机器人(人形四足机器人)计算机技术:计算机五大组成:运算器(数…

管理中心理学问:面试中教你识别他人需求动机

“我工作是为了钱,为了吃,住,和用钱买东西。”“我工作是为了地位和认可。”“我工作是为了有所归属,为了成为一个团体的成员。”“我工作是想高升。”“我工作是因为人应该工作,这是唯一的权利。”“我工作为了获取知识和认识世界…

【JavaScript】读取商品页面中的结构化数据(JSON-LD),在不改动服务端情况下,实现一对一跳转

前端实践:从商品页面读取 mpn 并实现一对一跳转 在实际开发中,我们经常会遇到这样一种需求: 用户浏览 A 网站的商品页面后,点击按钮能够直接跳转到 B 网站的对应商品。 表面看似只是一个按钮跳转,但如果不同商品需要精…

HTML5实现好看的邀请函网页源码

HTML5实现好看的邀请函网页源码 前言一、设计来源1.1 邀请函主页1.2 邀请函活动信息1.3 邀请函内容1.4 邀请函活动地址1.5 邀请函活动流程1.6 邀请函活动奖励1.7 邀请函联系我们 二、效果和源码2.1 动态效果2.2 源代码 结束语 HTML5实现好看的邀请函网页源码,酷炫的…

传输层TCP 与 安全层SSL/TLS

本章节主要探讨三个问题:1. SSL/TSL 的区别和联系是什么?2. 我们常说的 “三次握手” 发生在哪个阶段,SSL/TSL层有参与吗?3. HTTPS混合加密发生在哪个层?一、SSL 和 TLS 联系继承关系:TLS 直接基于 SSL 3.0 设计,可以…

【数学建模学习笔记】时间序列分析:ARIMA

零基础看懂 ARIMA 模型:从原理到实战如果你完全没接触过 “时间序列预测”,也不懂复杂公式,这篇会用 “说人话” 的方式帮你搞懂 ARIMA 模型,以及文中代码到底在做什么。一、先搞懂:ARIMA 是用来干嘛的?简单…

【macOS】垃圾箱中文件无法清理的“含特殊字符文件名”的方法

【macOS】垃圾箱中文件无法清理的“含特殊字符文件名”的方法文件名包含特殊字符(如空格、中文符号等)导致终端无法正确识别文件路径。 可以尝试以下解决方法:使用文件路径自动补全输入 rm (注意 rm 后有空格)&#xf…

​​​​​​​Blender 重拓扑修改器实战指南:从基础操作到细节优化​

在 Blender 建模中,重拓扑是解决 “高模难编辑、低模细节差” 的关键。传统手动重拓扑效率低,重拓扑修改器能自动生成规整拓扑,保留模型外形,适合游戏资产、动画角色等场景。 一、核心作用与适用场景​ 重拓扑修改器并非 “一键完…

C/C++哆啦A梦

写在前面 用代码绘制童年记忆中的那个蓝胖子——哆啦A梦,是我对经典角色的一次深情致敬。这段程序不仅是一幅静态图像的生成,更是一次对童年幻想世界的数字重建。通过精确的几何控制与色彩搭配,我将那个圆润可爱、温暖可靠的机器人重新带回眼…

CSS入门指南:30字掌握核心技巧

1. CSS初体验 1.1. CSS定义 层叠样式表 (Cascading Style Sheets,缩写为 CSS) 用来描述 HTML 文档的呈现(美化内容) 1.2. CSS引入方式 内部样式表:学习使用 CSS 代码写在head里面的 style标签 里面 外部样式表&…

从实操到原理:一文搞懂 Docker、Tomcat 与 k8s 的关系(附踩坑指南 + 段子解疑)

目录 一、先分清:Docker、Tomcat、k8s 到底是 “干啥的”? 二、它们的 “合作关系”:从 Java 项目到集群部署的全流程 三、实际应用场景:什么时候该用谁? 1. 单独使用场景 2. 组合使用场景(最常见&…

测试覆盖率不够高?这些技巧让你的FastAPI测试无懈可击!

url: /posts/0577d0e24f48b3153b510e74d3d1a822/ title: 测试覆盖率不够高?这些技巧让你的FastAPI测试无懈可击! date: 2025-09-02T01:49:10+08:00 lastmod: 2025-09-02T01:49:10+08:00 author: cmdragon summary: FastAPI通过TestClient工具支持单元测试,模拟HTTP请求直接…

Qwen3-Reranker-0.6B 模型结构

模型加载 import torch from modelscope import AutoModel, AutoTokenizer, AutoModelForCausalLMtokenizer AutoTokenizer.from_pretrained("Qwen/Qwen3-Reranker-0.6B", padding_sideleft) model AutoModelForCausalLM.from_pretrained("Qwen/Qwen3-Reranke…

无参 MOS 算法的评估方式

一、无参 MOS 算法 在音频处理和质量评估领域,MOS(Mean Opinion Score)是一种常用的主观评价指标,用于衡量音频质量。然而,获取主观 MOS 评分通常需要大量的人力和时间。因此,无参 MOS 算法应运而生&#…

Flowable——配置使用Flowable-UI

文章目录 前言 框架选型与版本 flowable-ui 搭建 依赖引入 springboot 主要版本 flowable 相关 log4j 日志配置项 配置文件 log4j配置文件 application.yml 增加启动类并启动程序 项目整体结构 前言 最近对工作流的flowable比较感兴趣,汇总记录一下相关的研究学习知识点。 框…

2025大学生必考互联网行业证书排名​

在互联网行业蓬勃发展的当下,大学生若想毕业后顺利投身其中,提前考取相关高含金量证书不失为明智之举。这些证书不仅能证明专业能力,还能在求职时为你增添竞争优势。接下来,为大家详细介绍 2025 年大学生必考的互联网行业证书排名…

【并发系列-01】高并发系统架构设计原理

【并发系列-01】高并发系统架构设计原理 1. 业务场景:当双11遇上技术挑战 1.1 问题场景描述 想象一下这样的场景:某电商平台在双11期间,短短30分钟内涌入了500万用户,同时发起了超过2000万次商品查询请求和100万次下单操作。而平时…