目录前言1、View2、Text3、Image4、ImageBackground5、TextInput6、TouchableOpacity7、TouchableHighlight8、Button9、Pressable10、ScrollView11、FlatList12、SectionList13、RefreshControl14、Modal15、StatusBar16、Switch前言本篇接着前面的RN学习旅程继续来写RN的学习笔记。组件官方文档https://reactnative.cn/docs/components-and-apis1、View构建 UI 的最基础组件是一个支持flex布局、样式、一些触摸处理和无障碍控制的容器可以嵌套在其他视图内并且可以有 0 到多个任何类型的子组件①、flexDirectionflexDirection用于控制横向row和纵向column布局布局方向可通过column reverse或row reverse实现反向排列②、flexGrow和flex属性分配逻辑宽度计算依据flexGrow按比例分配父容器剩余空间自身宽度剩余空间分配值flex按比例分配父容器全部空间忽略自身宽度完全按比例分配③、尺寸属性传值和百分比百分比赋值需确保总和不超过100%margin和padding属性支持百分比设置例如margin-top: 12%或padding-left: 20%百分比基于父布局的对应尺寸计算。border-width属性不支持百分比赋值如border-width: 10%会导致报错必须使用固定数值如10px。④、position absolute绝对定位绝对定位元素需主动定义位置属性才能完全独立于父布局场景交叉轴表现覆盖条件父布局设置alignItems: center子元素水平居中子元素未设置left/right父布局设置alignItems: flex-end子元素靠右对齐子元素设置left属性后失效子元素设置left: 30强制左偏移30单位优先级高于父布局对齐⑤、onLayoutonLayout是RN核心布局回调在元素完成布局后触发返回其尺寸和位置信息。与原生开发机制一致用于获取动态布局后的实际渲染参数。event.nativeEvent包含关键布局数据需重点关注而非整个event对象。原生事件封装原理RN组件通过桥接转发原生布局事件。回调触发条件布局参数变更必触发回调包括width/height/x/y任一值变化。⑥、setNativePropssetNativeProps是性能瓶颈下的选择余地该方法可直接动态更新视图属性。setNativeProps适用于需要立即生效的高性能场景。通过state控制视图属性需等待重绘周期而该方法能绕过渲染流程直接操作原生组件。性能优化时该方法可作为备选方案尤其在动画或高频属性更新场景中。useEffect(() { setTimeout(() { viewRef.current.setNativeProps({ style: { backgroundColor: blue, width: 300 } }); }, 2000); });2、Text①、字体属性fontsize基本用法通过fontSize属性设置文字大小直接写数值即可如fontSize: 24默认值系统默认字体大小为14注意事项不要使用百分比等非数值单位如20%会导致报错fontWeight取值范围数值100-900100的整数倍枚举值normal和bold平台差异安卓仅支持两种状态normal400-500和bold600-900iOS/Web支持多级粗细开发建议实际项目中通常只使用normal和bold两种状态fontFamily实现步骤在安卓工程src/main/res/font目录放入字体文件如CustomFont.ttf通过fontFamily: CustomFont引用不带扩展名②、行数及修饰模式文本行数控制numberOfLines: 控制文本显示的行数超出指定行数的文本会被截断文本截断模式ellipsizeMode: 决定被截断文本的显示方式有四种模式tail(默认)在文本末尾显示省略号(...)head在文本开头显示省略号middle在文本中间显示省略号clip直接裁剪不显示省略号(不推荐使用)③、选中及色号selectable: 控制文本是否可选择默认值为false(不可选择)设置为true时允许用户选择文本selectionColor: 设置文本选中时的背景颜色可接受颜色名称(如red)或十六进制值(如#c0c0c0)④、点击和长按事件支持React Native的Text组件支持点击(onPress)和长按(onLongPress)事件⑤、跟随系统字号控制机制: allowFontScaling属性决定文本是否跟随系统字体大小设置进行缩放默认值: 该属性默认为true即默认跟随系统字体缩放⑥、文字嵌套嵌套特性在React Native中Text组件可以嵌套使用这是许多开发者不知道的特性。基本结构外层Text组件包裹内层Text组件内层Text可以有自己的样式。限制嵌套Text组件无法使用margin和padding属性可通过添加空格字符实现间距效果继承未指定的样式属性会继承外层Text的样式显式定义的样式会覆盖继承的样式⑦、文本对齐垂直方向通过textAlignVertical: top等属性控制垂直对齐方式主要用于非嵌套的独立文本元素水平方向不加后缀的textAlign指水平方向对齐值left、right、center、justify(两端对齐)⑧、文本装饰基本属性textDecorationStyle定义装饰线的样式textDecorationLine定义装饰线的类型这两个属性必须搭配使用才能生效样式类型solid实线线型选择underline下划线line-through删除线文字中间的横线⑨、文字阴影核心属性文字阴影需要三个属性联合使用textShadowColor阴影颜色、textShadowOffset阴影偏移、textShadowRadius阴影半径使用限制这三个属性必须同时使用才能生效单独使用任一属性都不会产生阴影效果3、ImageImage是React Native中用于加载图片的核心组件现代APP开发中图片展示是必备功能通过source属性指定图片源支持两种类型。①、图片源本地图片存储位置存放在项目的assets/images目录下导入方式使用ES6的import语法导入import avatar from ../assets/images/avatar.png直接赋值给source属性Image source{avatar}/通过style属性设置样式如{width:120, height:120}未设置样式时图片显示原始尺寸网络图片通常将URL保存在constants目录的配置文件中示例export const imageUri https://profile-avatar.csdnimg.cn/Image source{{uri: imageUri}}/必须显式设置图片尺寸样式②、缩放模式生效条件当图片源宽高与Image组件宽高不等比/不等大时生效核心作用控制图片在容器中的显示方式和比例关系contain等比例拉伸至至少一边撑满容器center图片小于容器保持原尺寸居中图片大于容器等比例缩小至完全容纳conver等比例放大至完全覆盖容器图片可能被裁剪始终填满整个容器stretch非等比例拉伸至完全填充图片会变形强制适应容器尺寸repeat在XY轴重复平铺至填满容器③、模糊半径属性名blurRadius取值效果1轻微模糊20完全模糊④、占位图片属性名defaultSource作用网络图片加载失败时的备用本地图必要性网络请求不可靠时的容错方案实现方式同时指定source和defaultSource属性⑤、渐入动画时间fadeDuration控制图片加载完成后的渐显动画时长单位毫秒大面积图片建议设置200ms过渡。典型值建议默认值300ms未明确说明但实际效果推荐值200ms平衡流畅度与等待时间极端值可设为0ms立即显示或3000ms明显过渡⑥、加载成功和失败onLoad: 图片加载成功时触发的回调onError: 图片加载失败时触发的回调需要传入箭头函数作为回调处理nativeEvent: 包含图片加载后的详细信息示例值: {height:200,uri:https://...,width:200}source: 包含uri(图片地址)、width(宽度)、height(高度)等关键信息⑦、加载开始与结束回调配对机制onLoadStart和onLoadEnd是成对出现的回调函数分别标记网络图片加载过程的开始和结束时间点成功加载流程最后触发onLoadEnd加载成功后触发onLoad触发onLoadStart失败加载流程不会触发onLoadEnd回调加载失败时触发onError触发onLoadStart⑧、着色tintColor基本用法在Image组件的style中添加tintColor: red图片非透明区域会立即着色为指定颜色属性特点支持所有CSS颜色值包括十六进制、RGB、颜色名称等实际应用比如在dark/light模式切换时动态改变图标颜色⑨、Image组件APIImage.getSize功能作用用于获取网络图片的尺寸信息包含成功和失败两个回调函数参数说明第一个参数远程图片的URI地址、第二个参数成功回调函数返回图片的width和height、第三个参数失败回调函数返回错误信息error使用步骤创建imgRef引用const imgRefuseRef(null); 在useEffect中调用APIImage.prefetch功能特点预加载网络图片到本地缓存返回Promise对象优点提前下载大图片到本地磁盘后续加载时直接从本地读取速度快于网络下载4、ImageBackgroundImageBackground是一个复合组件结合了View和Image的功能。该组件主要用于实现支持布局的图片加载功能。核心属性如下style用于定义组件布局样式imageStyle用于定义内部图片样式ref指向组件实例的引用imageRef指向内部图片实例的引用style属性控制组件布局特征支持所有View组件的布局属性如width、height、flexDirection等imageStyle属性控制图片渲染特征支持resizeMode如cover/stretch支持borderRadius等图片特有样式典型配置示例style{{ width: 100%, height: 150 }} imageStyle{{ resizeMode: cover, borderRadius: 12 }}ref和imageRef引用类型指向对象典型应用场景ref组件布局实例调用View相关API如measureimageRef内部图片实例调用Image相关API如prefetch5、TextInput①、字体样式属性与Text组件一致字号fontSize如20、24颜色color如red、#333加粗fontWeight: bold包括下划线等装饰属性均相同②、自动聚焦属性autoFocustrue页面加载后自动聚焦键盘弹出false默认不聚焦APIfocus()需配合refuseRef 构建 inputRef示例useEffect setTimeout 2秒后调用 inputRef.current.focus()效果2秒后主动聚焦键盘弹出③、自动失焦属性blurOnSubmittrue点击提交如“勾”后自动失焦键盘收起false点击提交后键盘不收起APIblur()示例useEffect setTimeout 2秒后调用 inputRef.current.blur()效果2秒后主动失焦键盘收起补充后续可操作 Keyboard API 直接控制键盘④、隐藏光标属性caretHiddentrue隐藏光标仍可输入默认值false显示光标使用场景不常用⑤、默认输入属性defaultValue设置默认内容如“默认内容”效果页面加载后自动显示无需聚焦⑥、可编辑性属性editabletrue可编辑可聚焦输入false不可编辑无法调起键盘使用场景控制输入框业务逻辑如用户禁言、违规处罚⑦、键盘类型default常规文字输入number pad / decimal pad数字输入email-address邮箱输入也可用 defaultphone-pad手机号输入也可用 number pad⑧、确定键配置returnKeyType 属性功能配置键盘右下角“确定键”的 图标与语义作用向用户直观提示 下一步动作⑨、最大长度maxLength 属性功能限制输入框的 最大字符数示例maxLength{11} 限制输入11位手机号重要程度极高几乎每个 TextInput 组件都会使用用于防止无限输入⑩、多行输入多行输入相关属性属性multiline、numberOfLines作用控制 TextInput 组件的多行输入与显示行为multiline属性允许输入多行true允许 输入多行文本false禁止 换行始终单行输入对齐方式多行输入时内容默认 垂直居中设置 textAlignVertical: top使内容从 顶部 开始输入numberOfLines属性控制显示行数⑪、相关回调焦点回调属性属性onFocus、onBlur功能监听输入框的 聚焦 与 失焦 事件内容回调属性属性onChange、onChangeText区别onChange回调参数为 原生事件对象含 target 等onChangeText回调参数为 纯文本内容更常用⑫、安全模式属性定义secureTextEntry布尔值true功能输入内容自动转为圆点•••隐藏明文限制不可与 multilinetrue 同时使用6、TouchableOpacity相当于一个 支持点击事件的 View可包含多个子节点属性activeOpacity值范围0 ~ 1含义不透明度变化范围从设定值变化到1不透明度1完全不透明不透明度0完全透明事件列表onPress点击事件最常用onLongPress长按事件生产中使用较少但会用到delayLongPress长按延迟时间number类型事件拆分onPressIn手指按下时触发onPressOut手指抬起时触发事件触发顺序点击onPressIn → onPressOut → onPress长按onPressIn → onLongPress → onPressOut使用场景大多数情况使用合成事件onPress / onLongPress极少数情况使用拆分事件布局特性与 View 完全一致可包含多个子元素支持 flexbox 布局7、TouchableHighlight该组件具有高亮效果但使用频率较低子节点限制仅支持单个React元素作为子节点必须实现onPress方法否则无法触发点击效果样式控制通过underlayColor属性设置点击高亮颜色通过activeOpacity控制透明度变化阈值8、Button特点使用简单但样式固定是React Native提供的标准点击组件优势无需设置样式即可显示比Touchable系列组件更便捷局限无法自定义UI样式只能使用系统默认样式基本属性title属性必需属性类型必须为字符串设置按钮显示文字如title按 钮不设置会报错title prop must be a stringcolor属性设置按钮文字颜色如colorgreen接受颜色名称字符串或十六进制颜色值onPress属性点击回调函数如onPress{()console.log(onPress)}点击时触发与Touchable系列组件行为一致disabled属性布尔值控制按钮是否可点击true时按钮变灰不可点击false可正常交互9、Pressable①、点击类事件与其他组件一致事件回调: 与其他点击组件相同Pressable也使用onPress回调来处理点击事件兼容性: 是React Native新版本提供的组件②、带状态样式与子节点状态回调: 样式可以写成回调函数形式接收state参数其中state.pressed表示按压状态子节点状态: 子节点也可以根据状态动态变化通过回调函数返回不同的子组件总结适用场景: 当需要实现点击状态和非点击状态UI有明显差异时使用优势: 相比TouchableOpacity等组件可以更灵活地实现复杂的状态切换效果选择建议: 简单效果使用Button或TouchableOpacity即可复杂状态切换才使用Pressable实现原理: 通过state.pressed状态和样式回调实现UI的动态变化10、ScrollView①、ScrollView添加子节点的三种方式固定子元素直接编写静态子组件例如多个Text标签列表渲染通过map方法动态生成子组件需为每个子项添加唯一key属性以优化性能数组渲染通过函数返回预构建的组件数组适用于动态生成大量子组件②、contentContainerStyle属性功能控制ScrollView内容容器的样式支持所有View样式属性常用场景设置内边距如paddingHorizontal: 16③、滚动键盘消失keyboardDismissMode属性选项行为适用场景none滚动时键盘不消失需保持输入状态时使用on-drag开始滚动时立即隐藏键盘多数列表场景的默认选择interactiveiOS专属滚动后键盘随手势交互式隐藏仅需适配iOS平台时使用④、点击收起键盘keyboardShouldPersistTaps属性控制点击非输入区域时键盘的显隐行为属性键盘行为按钮响应never首次点击按钮时收起键盘第二次点击才触发onPresshanded点击按钮不收起键盘立即触发onPress⑤、滚动相关滚动监听方法onMomentumScrollBegin松手后滚动开始时触发onMomentumScrollEnd滚动停止时触发可能多次回调滚动距离监听onScroll方法(iOS中scrollEventThrottle必须设置)监听内容滚动距离通过nativeEvent.contentOffset获取参数解析垂直滚动取y值水平滚动取x值超出滚动never滚动到头后禁止继续拖动always允许轻微弹性拉伸分页滚动和滚动方向horizontal属性实现横向滚动列表分页滚动配置pagingEnabled使滚动按整页停顿子元素宽度需设置为屏幕宽度通过Dimensions.get获取分页滚动效果松手后自动吸附到最近整页位置实现要点子元素宽度必须与滚动容器宽度一致注意事项实际开发应避免内联样式滚动开关scrollEnabled属性控制滚动开关布尔值决定ScrollView是否允许交互滚动。true为启用滚动false为禁用滚动。该属性功能单一但实用性强初始滚动contentOffset属性设置初始滚动位置需传入包含x/y坐标的对象。纵向列表指定y值如100横向列表指定x值。该属性适用于需要默认定位到特定内容的场景例如长列表的初始展示位置优化。是否展示滚动条showVerticalScrollIndicator控制垂直滚动条showHorizontalScrollIndicator控制水平滚动条设置false可隐藏平台默认样式的滚动条。纵向列表示例中showVerticalScrollIndicator设为false后右侧滚动条消失。吸顶元素stickyHeaderIndices属性实现元素吸顶需传入目标元素的索引数组。索引0使第一个元素红色输入框吸顶索引1使第二个元素按钮吸顶吸顶效果在滚动时会固定指定元素后续将介绍更强大的SectionList组件实现分组吸顶。⑥、核心APIscrollTo滚动到指定坐标需通过useRef获取组件实例scrollToEnd滚动至列表末尾调用示例scrollViewRef.current.scrollTo({y: 300, animated: true})11、FlatList①、基础使用组件特点FlatList是React Native提供的高性能列表组件相比ScrollView更适合渲染大量数据优化原理采用局部渲染机制仅创建当前屏幕可见区域元素其他区域会进行回收和复用核心属性必须配置三个基础属性才能正常使用data、renderItem和keyExtractor②、滚动属性参考ScrollViewcontentContainerStyle与style的区别style属性用于设置整个FlatList的样式contentContainerStyle用于设置FlatList内容容器的样式与ScrollView的用法相同隐藏垂直滚动条使用showsVerticalScrollIndicator{false}属性滚动监听使用onScroll事件回调通过event.nativeEvent.contentOffset获取滚动位置horizontal属性控制列表是横向(true)还是纵向(false)滚动默认值为false纵向滚动③、表头、表尾、空元素ListHeaderComponent和ListFooterComponent头部始终显示在首项之前尾部固定在内容末尾不受滚动影响。ListEmptyComponent用于在列表数据为空时显示占位内容。它们都是直接返回React元素即可。④、分隔线ItemSeparatorComponent属性⑤、多列布局通过numColumns指定列数⑥、可见元素回调当需要实时获取列表当前滚动位置对应的元素时使用特别是在元素高度不一致或需要精确跟踪滚动位置的情况下与onScroll区别onScroll只能获取像素级偏移量而onViewableItemsChanged可以直接获取元素索引无需计算元素高度回调参数接收info对象可通过解构获取viewableItems数组数组第0个元素当前可视区域最顶部的可见项数组最后一个元素当前可视区域最底部的可见项⑦、滚动APIscrollToIndex()推荐使用通过索引定位元素参数配置:index: 指定目标元素的索引从0开始viewPosition: 控制元素在视口中的位置0顶部0.5居中1底部animated: 是否启用动画过渡效果true/falsescrollToOffset()按像素值滚动指定距离精确控制滚动位置时使用scrollToEnd()快速滚动到列表底部12、SectionList核心组件SectionList是React Native提供的多类型分组列表组件继承自FlatList但增加了分组功能数据特点支持不同类型数据的分组显示常用于通讯录、分类商品等场景数据结构必须是一个数组每个元素是对象且必须包含data属性①、renderItem参数解构可获取item(当前项)、index(在分组中的索引)、section(所属分组对象)②、keyExtractor作用机制与FlatList相同为列表项生成唯一key推荐方案组合item内容和index生成key如${item}-${index}注意事项必须保证key的唯一性否则会导致渲染错误③、分组头部renderSectionHeader通过{section}参数可获取当前分组数据④、分组吸顶属性stickySectionHeadersEnabled效果说明当前分组头部会固定在顶部直到被下一分组头部顶替使用建议在需要分组导航的场景都应开启此属性启用方式只需设置为true即可stickySectionHeadersEnabled{true}⑤、滚动APIscrollToLocation()特殊参数需要同时指定sectionIndex和itemIndex定位规则sectionIndex分组索引(从0开始)itemIndex包含分组头部的完整索引(头部为0)13、RefreshControl①、下拉刷新RefreshControl组件核心属性refreshing布尔值表示当前是否正在刷新状态管理useState → const [refreshing, setRefreshing] useState(false)初始值false默认未刷新onRefresh 逻辑触发时机下拉松手后核心操作请求最新数据流程设置 setRefreshing(true)标记刷新中发起网络请求request new data请求完成 → setRefreshing(false)结束刷新状态②、上拉加载属性说明归属onEndReached 和 onEndReachedThreshold 属于列表组件非RefreshControl关联性上拉加载与下拉刷新成对出现onEndReached回调函数列表滚动到底部时触发 → 加载下一页数据onEndReached 逻辑触发时机列表滚动至尾部核心操作请求下一页数据request next page dataonEndReachedThreshold 属性作用定义触底阈值何时触发 onEndReached取值范围0 ~ 1含义距离底部占屏幕高度的比例例如 0.1 → 距离底部还剩10%屏幕高度时触发14、ModalModal组件特殊组件用于承载弹窗内容实现自定义弹窗本质容器自身不显示UI用于承载子元素①、控制显示核心属性visible作用控制弹窗的显示/关闭状态②、关闭弹窗onRequestCloseonRequestClose回调方法非关闭Modal本身关闭方式通过 setVisible(false) 或调用 hideModal 方法安卓点击物理返回键触发 onRequestClose 回调iOS无物理返回键不走 onRequestClose通过UI交互关闭③、背景透明属性transparent作用使Modal背景透明露出底层页面内容④、状态栏透明解决方案设置属性 statusBarTranslucent true效果状态栏与Modal内容融为一体状态栏背景透明度与弹窗半透明背景一致避免UI从状态栏处割裂⑤、动画方式属性animationType三种选项none无动画直接弹出默认效果突兀fade渐变效果渐隐渐现较为柔和slide滑动效果从底部拉出/拉下更自然选型建议底部弹窗列表、半页面推荐 slide中间弹窗对话框推荐 fade⑥、状态回调回调方法onShowModal出现时触发onDismissModal隐藏时触发15、StatusBar①、深浅模式模式选择: 提供三种选项dark-content深色内容、default默认和light-content浅色内容作用对象: 控制状态栏上文字/图标的颜色而非状态栏背景色颜色限制: 仅支持黑白两色不支持自定义其他颜色如红色/蓝色效果对比:dark-content深灰色文字默认效果light-content白色文字需搭配深色背景②、背景颜色搭配原则: 必须与barStyle形成对比dark-content 浅色背景如白色light-content 深色背景如#303030透明度支持: 支持半透明如#60303030和全透明transparent动态修改: 可通过backgroundColor属性或setBackgroundColor()API修改③、透明悬浮平台差异:Android默认独占位置iOS默认悬浮显示translucent属性:true状态栏悬浮页面内容可穿透到状态栏区域false状态栏独占顶部区域Android默认沉浸式实现: 需配合translucenttrue和透明背景色布局调整: 启用后页面布局从屏幕最顶端开始④、隐藏状态栏hidden属性:true完全隐藏状态栏false显示状态栏动画效果: 显示/隐藏时有平滑过渡动画使用场景: 适用于全屏拍照/录像等特殊页面⑤、API对应关系:setBackgroundColor() ↔ backgroundColor属性setBarStyle() ↔ barStyle属性setHidden() ↔ hidden属性setTranslucent() ↔ translucent属性调用方式: 通过ref引用组件后调用等效性: API与属性设置效果完全相同16、Switch①、开关切换value控制通过value属性控制开关状态true表示开启false表示关闭状态回调使用onValueChange回调函数获取状态变化回调参数为新的value值②、设置不可用disabled属性设置为true时组件变为灰色不可操作状态应用场景当用户无权限或功能过期时禁用开关注意禁用状态仍需保持value值的正确性③、背景颜色trackColor需设置为对象格式 {true: 开状态颜色, false: 关状态颜色}实现原理背景轨道颜色会随开关状态自动切换④、前景颜色thumbColor控制开关滑块的圆形背景颜色特殊性质与trackColor不同只接受单一颜色值动态实现可通过三元运算符实现状态相关颜色到这里本篇笔记就结束了简单做个总结吧组件类型核心功能关键特性应用场景ViewUI构建基石基础容器组件所有页面布局Text文本显示使用简单但深度复杂文字内容展示Image图片加载支持静态/网络资源UI视觉元素ImageBackground背景图片ViewImage组合优化带背景的容器TextInput输入交互官方唯一输入组件表单/搜索框TouchableOpacity点击反馈透明度变化效果通用按钮交互TouchableHighlight高亮反馈多样化视觉效果特殊按钮需求TouchableWithoutFeedback无效果点击无视觉反馈特殊场景交互Button标准按钮预设样式基础表单提交Pressable高级交互支持复杂手势自定义交互组件ScrollView内容滚动基础滚动容器长内容展示FlatList高性能列表自动内存优化大数据量渲染SectionList分组列表多类型数据支持分类数据展示RefreshControl刷新控制下拉刷新功能列表数据更新Modal弹窗组件浮动内容容器对话框/浮层StatusBar状态栏适配系统状态栏控制界面沉浸式适配Switch开关切换二进制选择器设置选项切换下期再会 开启RN之旅——系统组件
目录前言1、View2、Text3、Image4、ImageBackground5、TextInput6、TouchableOpacity7、TouchableHighlight8、Button9、Pressable10、ScrollView11、FlatList12、SectionList13、RefreshControl14、Modal15、StatusBar16、Switch前言本篇接着前面的RN学习旅程继续来写RN的学习笔记。组件官方文档https://reactnative.cn/docs/components-and-apis1、View构建 UI 的最基础组件是一个支持flex布局、样式、一些触摸处理和无障碍控制的容器可以嵌套在其他视图内并且可以有 0 到多个任何类型的子组件①、flexDirectionflexDirection用于控制横向row和纵向column布局布局方向可通过column reverse或row reverse实现反向排列②、flexGrow和flex属性分配逻辑宽度计算依据flexGrow按比例分配父容器剩余空间自身宽度剩余空间分配值flex按比例分配父容器全部空间忽略自身宽度完全按比例分配③、尺寸属性传值和百分比百分比赋值需确保总和不超过100%margin和padding属性支持百分比设置例如margin-top: 12%或padding-left: 20%百分比基于父布局的对应尺寸计算。border-width属性不支持百分比赋值如border-width: 10%会导致报错必须使用固定数值如10px。④、position absolute绝对定位绝对定位元素需主动定义位置属性才能完全独立于父布局场景交叉轴表现覆盖条件父布局设置alignItems: center子元素水平居中子元素未设置left/right父布局设置alignItems: flex-end子元素靠右对齐子元素设置left属性后失效子元素设置left: 30强制左偏移30单位优先级高于父布局对齐⑤、onLayoutonLayout是RN核心布局回调在元素完成布局后触发返回其尺寸和位置信息。与原生开发机制一致用于获取动态布局后的实际渲染参数。event.nativeEvent包含关键布局数据需重点关注而非整个event对象。原生事件封装原理RN组件通过桥接转发原生布局事件。回调触发条件布局参数变更必触发回调包括width/height/x/y任一值变化。⑥、setNativePropssetNativeProps是性能瓶颈下的选择余地该方法可直接动态更新视图属性。setNativeProps适用于需要立即生效的高性能场景。通过state控制视图属性需等待重绘周期而该方法能绕过渲染流程直接操作原生组件。性能优化时该方法可作为备选方案尤其在动画或高频属性更新场景中。useEffect(() { setTimeout(() { viewRef.current.setNativeProps({ style: { backgroundColor: blue, width: 300 } }); }, 2000); });2、Text①、字体属性fontsize基本用法通过fontSize属性设置文字大小直接写数值即可如fontSize: 24默认值系统默认字体大小为14注意事项不要使用百分比等非数值单位如20%会导致报错fontWeight取值范围数值100-900100的整数倍枚举值normal和bold平台差异安卓仅支持两种状态normal400-500和bold600-900iOS/Web支持多级粗细开发建议实际项目中通常只使用normal和bold两种状态fontFamily实现步骤在安卓工程src/main/res/font目录放入字体文件如CustomFont.ttf通过fontFamily: CustomFont引用不带扩展名②、行数及修饰模式文本行数控制numberOfLines: 控制文本显示的行数超出指定行数的文本会被截断文本截断模式ellipsizeMode: 决定被截断文本的显示方式有四种模式tail(默认)在文本末尾显示省略号(...)head在文本开头显示省略号middle在文本中间显示省略号clip直接裁剪不显示省略号(不推荐使用)③、选中及色号selectable: 控制文本是否可选择默认值为false(不可选择)设置为true时允许用户选择文本selectionColor: 设置文本选中时的背景颜色可接受颜色名称(如red)或十六进制值(如#c0c0c0)④、点击和长按事件支持React Native的Text组件支持点击(onPress)和长按(onLongPress)事件⑤、跟随系统字号控制机制: allowFontScaling属性决定文本是否跟随系统字体大小设置进行缩放默认值: 该属性默认为true即默认跟随系统字体缩放⑥、文字嵌套嵌套特性在React Native中Text组件可以嵌套使用这是许多开发者不知道的特性。基本结构外层Text组件包裹内层Text组件内层Text可以有自己的样式。限制嵌套Text组件无法使用margin和padding属性可通过添加空格字符实现间距效果继承未指定的样式属性会继承外层Text的样式显式定义的样式会覆盖继承的样式⑦、文本对齐垂直方向通过textAlignVertical: top等属性控制垂直对齐方式主要用于非嵌套的独立文本元素水平方向不加后缀的textAlign指水平方向对齐值left、right、center、justify(两端对齐)⑧、文本装饰基本属性textDecorationStyle定义装饰线的样式textDecorationLine定义装饰线的类型这两个属性必须搭配使用才能生效样式类型solid实线线型选择underline下划线line-through删除线文字中间的横线⑨、文字阴影核心属性文字阴影需要三个属性联合使用textShadowColor阴影颜色、textShadowOffset阴影偏移、textShadowRadius阴影半径使用限制这三个属性必须同时使用才能生效单独使用任一属性都不会产生阴影效果3、ImageImage是React Native中用于加载图片的核心组件现代APP开发中图片展示是必备功能通过source属性指定图片源支持两种类型。①、图片源本地图片存储位置存放在项目的assets/images目录下导入方式使用ES6的import语法导入import avatar from ../assets/images/avatar.png直接赋值给source属性Image source{avatar}/通过style属性设置样式如{width:120, height:120}未设置样式时图片显示原始尺寸网络图片通常将URL保存在constants目录的配置文件中示例export const imageUri https://profile-avatar.csdnimg.cn/Image source{{uri: imageUri}}/必须显式设置图片尺寸样式②、缩放模式生效条件当图片源宽高与Image组件宽高不等比/不等大时生效核心作用控制图片在容器中的显示方式和比例关系contain等比例拉伸至至少一边撑满容器center图片小于容器保持原尺寸居中图片大于容器等比例缩小至完全容纳conver等比例放大至完全覆盖容器图片可能被裁剪始终填满整个容器stretch非等比例拉伸至完全填充图片会变形强制适应容器尺寸repeat在XY轴重复平铺至填满容器③、模糊半径属性名blurRadius取值效果1轻微模糊20完全模糊④、占位图片属性名defaultSource作用网络图片加载失败时的备用本地图必要性网络请求不可靠时的容错方案实现方式同时指定source和defaultSource属性⑤、渐入动画时间fadeDuration控制图片加载完成后的渐显动画时长单位毫秒大面积图片建议设置200ms过渡。典型值建议默认值300ms未明确说明但实际效果推荐值200ms平衡流畅度与等待时间极端值可设为0ms立即显示或3000ms明显过渡⑥、加载成功和失败onLoad: 图片加载成功时触发的回调onError: 图片加载失败时触发的回调需要传入箭头函数作为回调处理nativeEvent: 包含图片加载后的详细信息示例值: {height:200,uri:https://...,width:200}source: 包含uri(图片地址)、width(宽度)、height(高度)等关键信息⑦、加载开始与结束回调配对机制onLoadStart和onLoadEnd是成对出现的回调函数分别标记网络图片加载过程的开始和结束时间点成功加载流程最后触发onLoadEnd加载成功后触发onLoad触发onLoadStart失败加载流程不会触发onLoadEnd回调加载失败时触发onError触发onLoadStart⑧、着色tintColor基本用法在Image组件的style中添加tintColor: red图片非透明区域会立即着色为指定颜色属性特点支持所有CSS颜色值包括十六进制、RGB、颜色名称等实际应用比如在dark/light模式切换时动态改变图标颜色⑨、Image组件APIImage.getSize功能作用用于获取网络图片的尺寸信息包含成功和失败两个回调函数参数说明第一个参数远程图片的URI地址、第二个参数成功回调函数返回图片的width和height、第三个参数失败回调函数返回错误信息error使用步骤创建imgRef引用const imgRefuseRef(null); 在useEffect中调用APIImage.prefetch功能特点预加载网络图片到本地缓存返回Promise对象优点提前下载大图片到本地磁盘后续加载时直接从本地读取速度快于网络下载4、ImageBackgroundImageBackground是一个复合组件结合了View和Image的功能。该组件主要用于实现支持布局的图片加载功能。核心属性如下style用于定义组件布局样式imageStyle用于定义内部图片样式ref指向组件实例的引用imageRef指向内部图片实例的引用style属性控制组件布局特征支持所有View组件的布局属性如width、height、flexDirection等imageStyle属性控制图片渲染特征支持resizeMode如cover/stretch支持borderRadius等图片特有样式典型配置示例style{{ width: 100%, height: 150 }} imageStyle{{ resizeMode: cover, borderRadius: 12 }}ref和imageRef引用类型指向对象典型应用场景ref组件布局实例调用View相关API如measureimageRef内部图片实例调用Image相关API如prefetch5、TextInput①、字体样式属性与Text组件一致字号fontSize如20、24颜色color如red、#333加粗fontWeight: bold包括下划线等装饰属性均相同②、自动聚焦属性autoFocustrue页面加载后自动聚焦键盘弹出false默认不聚焦APIfocus()需配合refuseRef 构建 inputRef示例useEffect setTimeout 2秒后调用 inputRef.current.focus()效果2秒后主动聚焦键盘弹出③、自动失焦属性blurOnSubmittrue点击提交如“勾”后自动失焦键盘收起false点击提交后键盘不收起APIblur()示例useEffect setTimeout 2秒后调用 inputRef.current.blur()效果2秒后主动失焦键盘收起补充后续可操作 Keyboard API 直接控制键盘④、隐藏光标属性caretHiddentrue隐藏光标仍可输入默认值false显示光标使用场景不常用⑤、默认输入属性defaultValue设置默认内容如“默认内容”效果页面加载后自动显示无需聚焦⑥、可编辑性属性editabletrue可编辑可聚焦输入false不可编辑无法调起键盘使用场景控制输入框业务逻辑如用户禁言、违规处罚⑦、键盘类型default常规文字输入number pad / decimal pad数字输入email-address邮箱输入也可用 defaultphone-pad手机号输入也可用 number pad⑧、确定键配置returnKeyType 属性功能配置键盘右下角“确定键”的 图标与语义作用向用户直观提示 下一步动作⑨、最大长度maxLength 属性功能限制输入框的 最大字符数示例maxLength{11} 限制输入11位手机号重要程度极高几乎每个 TextInput 组件都会使用用于防止无限输入⑩、多行输入多行输入相关属性属性multiline、numberOfLines作用控制 TextInput 组件的多行输入与显示行为multiline属性允许输入多行true允许 输入多行文本false禁止 换行始终单行输入对齐方式多行输入时内容默认 垂直居中设置 textAlignVertical: top使内容从 顶部 开始输入numberOfLines属性控制显示行数⑪、相关回调焦点回调属性属性onFocus、onBlur功能监听输入框的 聚焦 与 失焦 事件内容回调属性属性onChange、onChangeText区别onChange回调参数为 原生事件对象含 target 等onChangeText回调参数为 纯文本内容更常用⑫、安全模式属性定义secureTextEntry布尔值true功能输入内容自动转为圆点•••隐藏明文限制不可与 multilinetrue 同时使用6、TouchableOpacity相当于一个 支持点击事件的 View可包含多个子节点属性activeOpacity值范围0 ~ 1含义不透明度变化范围从设定值变化到1不透明度1完全不透明不透明度0完全透明事件列表onPress点击事件最常用onLongPress长按事件生产中使用较少但会用到delayLongPress长按延迟时间number类型事件拆分onPressIn手指按下时触发onPressOut手指抬起时触发事件触发顺序点击onPressIn → onPressOut → onPress长按onPressIn → onLongPress → onPressOut使用场景大多数情况使用合成事件onPress / onLongPress极少数情况使用拆分事件布局特性与 View 完全一致可包含多个子元素支持 flexbox 布局7、TouchableHighlight该组件具有高亮效果但使用频率较低子节点限制仅支持单个React元素作为子节点必须实现onPress方法否则无法触发点击效果样式控制通过underlayColor属性设置点击高亮颜色通过activeOpacity控制透明度变化阈值8、Button特点使用简单但样式固定是React Native提供的标准点击组件优势无需设置样式即可显示比Touchable系列组件更便捷局限无法自定义UI样式只能使用系统默认样式基本属性title属性必需属性类型必须为字符串设置按钮显示文字如title按 钮不设置会报错title prop must be a stringcolor属性设置按钮文字颜色如colorgreen接受颜色名称字符串或十六进制颜色值onPress属性点击回调函数如onPress{()console.log(onPress)}点击时触发与Touchable系列组件行为一致disabled属性布尔值控制按钮是否可点击true时按钮变灰不可点击false可正常交互9、Pressable①、点击类事件与其他组件一致事件回调: 与其他点击组件相同Pressable也使用onPress回调来处理点击事件兼容性: 是React Native新版本提供的组件②、带状态样式与子节点状态回调: 样式可以写成回调函数形式接收state参数其中state.pressed表示按压状态子节点状态: 子节点也可以根据状态动态变化通过回调函数返回不同的子组件总结适用场景: 当需要实现点击状态和非点击状态UI有明显差异时使用优势: 相比TouchableOpacity等组件可以更灵活地实现复杂的状态切换效果选择建议: 简单效果使用Button或TouchableOpacity即可复杂状态切换才使用Pressable实现原理: 通过state.pressed状态和样式回调实现UI的动态变化10、ScrollView①、ScrollView添加子节点的三种方式固定子元素直接编写静态子组件例如多个Text标签列表渲染通过map方法动态生成子组件需为每个子项添加唯一key属性以优化性能数组渲染通过函数返回预构建的组件数组适用于动态生成大量子组件②、contentContainerStyle属性功能控制ScrollView内容容器的样式支持所有View样式属性常用场景设置内边距如paddingHorizontal: 16③、滚动键盘消失keyboardDismissMode属性选项行为适用场景none滚动时键盘不消失需保持输入状态时使用on-drag开始滚动时立即隐藏键盘多数列表场景的默认选择interactiveiOS专属滚动后键盘随手势交互式隐藏仅需适配iOS平台时使用④、点击收起键盘keyboardShouldPersistTaps属性控制点击非输入区域时键盘的显隐行为属性键盘行为按钮响应never首次点击按钮时收起键盘第二次点击才触发onPresshanded点击按钮不收起键盘立即触发onPress⑤、滚动相关滚动监听方法onMomentumScrollBegin松手后滚动开始时触发onMomentumScrollEnd滚动停止时触发可能多次回调滚动距离监听onScroll方法(iOS中scrollEventThrottle必须设置)监听内容滚动距离通过nativeEvent.contentOffset获取参数解析垂直滚动取y值水平滚动取x值超出滚动never滚动到头后禁止继续拖动always允许轻微弹性拉伸分页滚动和滚动方向horizontal属性实现横向滚动列表分页滚动配置pagingEnabled使滚动按整页停顿子元素宽度需设置为屏幕宽度通过Dimensions.get获取分页滚动效果松手后自动吸附到最近整页位置实现要点子元素宽度必须与滚动容器宽度一致注意事项实际开发应避免内联样式滚动开关scrollEnabled属性控制滚动开关布尔值决定ScrollView是否允许交互滚动。true为启用滚动false为禁用滚动。该属性功能单一但实用性强初始滚动contentOffset属性设置初始滚动位置需传入包含x/y坐标的对象。纵向列表指定y值如100横向列表指定x值。该属性适用于需要默认定位到特定内容的场景例如长列表的初始展示位置优化。是否展示滚动条showVerticalScrollIndicator控制垂直滚动条showHorizontalScrollIndicator控制水平滚动条设置false可隐藏平台默认样式的滚动条。纵向列表示例中showVerticalScrollIndicator设为false后右侧滚动条消失。吸顶元素stickyHeaderIndices属性实现元素吸顶需传入目标元素的索引数组。索引0使第一个元素红色输入框吸顶索引1使第二个元素按钮吸顶吸顶效果在滚动时会固定指定元素后续将介绍更强大的SectionList组件实现分组吸顶。⑥、核心APIscrollTo滚动到指定坐标需通过useRef获取组件实例scrollToEnd滚动至列表末尾调用示例scrollViewRef.current.scrollTo({y: 300, animated: true})11、FlatList①、基础使用组件特点FlatList是React Native提供的高性能列表组件相比ScrollView更适合渲染大量数据优化原理采用局部渲染机制仅创建当前屏幕可见区域元素其他区域会进行回收和复用核心属性必须配置三个基础属性才能正常使用data、renderItem和keyExtractor②、滚动属性参考ScrollViewcontentContainerStyle与style的区别style属性用于设置整个FlatList的样式contentContainerStyle用于设置FlatList内容容器的样式与ScrollView的用法相同隐藏垂直滚动条使用showsVerticalScrollIndicator{false}属性滚动监听使用onScroll事件回调通过event.nativeEvent.contentOffset获取滚动位置horizontal属性控制列表是横向(true)还是纵向(false)滚动默认值为false纵向滚动③、表头、表尾、空元素ListHeaderComponent和ListFooterComponent头部始终显示在首项之前尾部固定在内容末尾不受滚动影响。ListEmptyComponent用于在列表数据为空时显示占位内容。它们都是直接返回React元素即可。④、分隔线ItemSeparatorComponent属性⑤、多列布局通过numColumns指定列数⑥、可见元素回调当需要实时获取列表当前滚动位置对应的元素时使用特别是在元素高度不一致或需要精确跟踪滚动位置的情况下与onScroll区别onScroll只能获取像素级偏移量而onViewableItemsChanged可以直接获取元素索引无需计算元素高度回调参数接收info对象可通过解构获取viewableItems数组数组第0个元素当前可视区域最顶部的可见项数组最后一个元素当前可视区域最底部的可见项⑦、滚动APIscrollToIndex()推荐使用通过索引定位元素参数配置:index: 指定目标元素的索引从0开始viewPosition: 控制元素在视口中的位置0顶部0.5居中1底部animated: 是否启用动画过渡效果true/falsescrollToOffset()按像素值滚动指定距离精确控制滚动位置时使用scrollToEnd()快速滚动到列表底部12、SectionList核心组件SectionList是React Native提供的多类型分组列表组件继承自FlatList但增加了分组功能数据特点支持不同类型数据的分组显示常用于通讯录、分类商品等场景数据结构必须是一个数组每个元素是对象且必须包含data属性①、renderItem参数解构可获取item(当前项)、index(在分组中的索引)、section(所属分组对象)②、keyExtractor作用机制与FlatList相同为列表项生成唯一key推荐方案组合item内容和index生成key如${item}-${index}注意事项必须保证key的唯一性否则会导致渲染错误③、分组头部renderSectionHeader通过{section}参数可获取当前分组数据④、分组吸顶属性stickySectionHeadersEnabled效果说明当前分组头部会固定在顶部直到被下一分组头部顶替使用建议在需要分组导航的场景都应开启此属性启用方式只需设置为true即可stickySectionHeadersEnabled{true}⑤、滚动APIscrollToLocation()特殊参数需要同时指定sectionIndex和itemIndex定位规则sectionIndex分组索引(从0开始)itemIndex包含分组头部的完整索引(头部为0)13、RefreshControl①、下拉刷新RefreshControl组件核心属性refreshing布尔值表示当前是否正在刷新状态管理useState → const [refreshing, setRefreshing] useState(false)初始值false默认未刷新onRefresh 逻辑触发时机下拉松手后核心操作请求最新数据流程设置 setRefreshing(true)标记刷新中发起网络请求request new data请求完成 → setRefreshing(false)结束刷新状态②、上拉加载属性说明归属onEndReached 和 onEndReachedThreshold 属于列表组件非RefreshControl关联性上拉加载与下拉刷新成对出现onEndReached回调函数列表滚动到底部时触发 → 加载下一页数据onEndReached 逻辑触发时机列表滚动至尾部核心操作请求下一页数据request next page dataonEndReachedThreshold 属性作用定义触底阈值何时触发 onEndReached取值范围0 ~ 1含义距离底部占屏幕高度的比例例如 0.1 → 距离底部还剩10%屏幕高度时触发14、ModalModal组件特殊组件用于承载弹窗内容实现自定义弹窗本质容器自身不显示UI用于承载子元素①、控制显示核心属性visible作用控制弹窗的显示/关闭状态②、关闭弹窗onRequestCloseonRequestClose回调方法非关闭Modal本身关闭方式通过 setVisible(false) 或调用 hideModal 方法安卓点击物理返回键触发 onRequestClose 回调iOS无物理返回键不走 onRequestClose通过UI交互关闭③、背景透明属性transparent作用使Modal背景透明露出底层页面内容④、状态栏透明解决方案设置属性 statusBarTranslucent true效果状态栏与Modal内容融为一体状态栏背景透明度与弹窗半透明背景一致避免UI从状态栏处割裂⑤、动画方式属性animationType三种选项none无动画直接弹出默认效果突兀fade渐变效果渐隐渐现较为柔和slide滑动效果从底部拉出/拉下更自然选型建议底部弹窗列表、半页面推荐 slide中间弹窗对话框推荐 fade⑥、状态回调回调方法onShowModal出现时触发onDismissModal隐藏时触发15、StatusBar①、深浅模式模式选择: 提供三种选项dark-content深色内容、default默认和light-content浅色内容作用对象: 控制状态栏上文字/图标的颜色而非状态栏背景色颜色限制: 仅支持黑白两色不支持自定义其他颜色如红色/蓝色效果对比:dark-content深灰色文字默认效果light-content白色文字需搭配深色背景②、背景颜色搭配原则: 必须与barStyle形成对比dark-content 浅色背景如白色light-content 深色背景如#303030透明度支持: 支持半透明如#60303030和全透明transparent动态修改: 可通过backgroundColor属性或setBackgroundColor()API修改③、透明悬浮平台差异:Android默认独占位置iOS默认悬浮显示translucent属性:true状态栏悬浮页面内容可穿透到状态栏区域false状态栏独占顶部区域Android默认沉浸式实现: 需配合translucenttrue和透明背景色布局调整: 启用后页面布局从屏幕最顶端开始④、隐藏状态栏hidden属性:true完全隐藏状态栏false显示状态栏动画效果: 显示/隐藏时有平滑过渡动画使用场景: 适用于全屏拍照/录像等特殊页面⑤、API对应关系:setBackgroundColor() ↔ backgroundColor属性setBarStyle() ↔ barStyle属性setHidden() ↔ hidden属性setTranslucent() ↔ translucent属性调用方式: 通过ref引用组件后调用等效性: API与属性设置效果完全相同16、Switch①、开关切换value控制通过value属性控制开关状态true表示开启false表示关闭状态回调使用onValueChange回调函数获取状态变化回调参数为新的value值②、设置不可用disabled属性设置为true时组件变为灰色不可操作状态应用场景当用户无权限或功能过期时禁用开关注意禁用状态仍需保持value值的正确性③、背景颜色trackColor需设置为对象格式 {true: 开状态颜色, false: 关状态颜色}实现原理背景轨道颜色会随开关状态自动切换④、前景颜色thumbColor控制开关滑块的圆形背景颜色特殊性质与trackColor不同只接受单一颜色值动态实现可通过三元运算符实现状态相关颜色到这里本篇笔记就结束了简单做个总结吧组件类型核心功能关键特性应用场景ViewUI构建基石基础容器组件所有页面布局Text文本显示使用简单但深度复杂文字内容展示Image图片加载支持静态/网络资源UI视觉元素ImageBackground背景图片ViewImage组合优化带背景的容器TextInput输入交互官方唯一输入组件表单/搜索框TouchableOpacity点击反馈透明度变化效果通用按钮交互TouchableHighlight高亮反馈多样化视觉效果特殊按钮需求TouchableWithoutFeedback无效果点击无视觉反馈特殊场景交互Button标准按钮预设样式基础表单提交Pressable高级交互支持复杂手势自定义交互组件ScrollView内容滚动基础滚动容器长内容展示FlatList高性能列表自动内存优化大数据量渲染SectionList分组列表多类型数据支持分类数据展示RefreshControl刷新控制下拉刷新功能列表数据更新Modal弹窗组件浮动内容容器对话框/浮层StatusBar状态栏适配系统状态栏控制界面沉浸式适配Switch开关切换二进制选择器设置选项切换下期再会