react-native的常用组件及api

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-native的常用组件及api相关的知识,希望对你有一定的参考价值。

参考技术A

可用于flex布局使用

必须把文本节点放到Text中,否则会报错,Text组件内的子组件不支持flex布局

android 是不支持 GIF 和 WebP 格式,你需要在android/app/build.gradle文件中根据需要手动添加

网络和 base64 数据的图片需要手动指定尺寸

在安卓中,如果使用图片大小远大于Image的图片会触发内存泄漏,只需要设置 Image 组件的 resizeMethod 属性为 resize 即可

提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等
能够配置出类似textarea、password,其他的多选、单选、下拉框等input类型需要引入第三方插件 https://www.jianshu.com/p/a7609fce8da4

ScrollView 实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)
一般来说我们会给 ScrollView 设置flex: 1以使其自动填充父容器的空余空间

Virtualized List 放在 ScrollView 中,ScrollView 是要全部渲染的,那么 Virtualized List 就计算不出来哪些 Cell 目前显示在屏幕上,会渲染所有的 Cell,那么它的优势就显现不出来了会报警告,所以尽量不要用ScrollView嵌套FlatList和SectionList
解释为什么不能嵌套 https://blog.csdn.net/gang544043963/article/details/106525516

ScrollView作为FlatList的父组件的时候,实现上拉加载更多使用onEndReached会无限加载,可以在ScrollView上监听onscroll事件触发加载更多或者不再用ScrollView把ScrollView中的其他内容放到FlatList 的ListHeaderComponent属性中。相见下方FlatList介绍使用。

一般使用 TouchableHighlight 或者 TouchableOpacity 代替

主要针对刘海屏,使用SafeAreaView包裹后,不会在刘海位置渲染页面,以免信息展示不全。
ScrollView的contentInsetAdjustmentBehavior="automatic"也有同样作用,但是滚动时会失效

以上是关于react-native的常用组件及api的主要内容,如果未能解决你的问题,请参考以下文章

react-native 环境配置及hello world

React-Native中列表SectionList学习

react-native使用蚂蚁金服的antd-mobile组件库教程

React-Native '不能将没有 YogaNode 的孩子添加到没有测量功能的父母!

React-native 没有将组件识别为组件

微信小程序常用组件及基本使用详解