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