React Native系统组件(一)

发布于:2025-09-02 ⋅ 阅读:(17) ⋅ 点赞:(0)

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}连用的时候会失效


网站公告

今日签到

点亮在社区的每一天
去签到