开启RN之旅——系统组件

|----------|--------------|----------------|
| 属性 | 分配逻辑 | 宽度计算依据 |
| 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单位 | 优先级高于父布局对齐 |

⑤、onLayout

onLayout是RN核心布局回调，在元素完成布局后触发，返回其尺寸和位置信息。
与原生开发机制一致，用于获取动态布局后的实际渲染参数。
event.nativeEvent包含关键布局数据，需重点关注而非整个event对象。
原生事件封装原理：RN组件通过桥接转发原生布局事件。
回调触发条件：布局参数变更必触发回调，包括width/height/x/y任一值变化。

⑥、setNativeProps

setNativeProps是性能瓶颈下的选择余地，该方法可直接动态更新视图属性。

setNativeProps适用于需要立即生效的高性能场景。通过state控制视图属性需等待重绘周期，而该方法能绕过渲染流程直接操作原生组件。性能优化时该方法可作为备选方案，尤其在动画或高频属性更新场景中。

javascript 复制代码

useEffect(() => {
  setTimeout(() => {
    viewRef.current.setNativeProps({
      style: { 
        backgroundColor: 'blue',
        width: 300 
      }
    });
  }, 2000);
});

2、Text

①、字体属性

fontsize

基本用法：通过fontSize属性设置文字大小，直接写数值即可（如fontSize: 24）
默认值：系统默认字体大小为14
注意事项：不要使用百分比等非数值单位（如20%会导致报错）

fontWeight

取值范围：
- 数值：100-900（100的整数倍）
- 枚举值：'normal'和'bold'
平台差异：
- 安卓仅支持两种状态：normal（400-500）和bold（600-900）
- iOS/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、Image

Image是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组件API

Image.getSize

功能作用：用于获取网络图片的尺寸信息，包含成功和失败两个回调函数
参数说明：第一个参数：远程图片的URI地址、第二个参数：成功回调函数，返回图片的width和height、第三个参数：失败回调函数，返回错误信息error
使用步骤：创建imgRef引用：const imgRef=useRef(null); 在useEffect中调用API

Image.prefetch

功能特点：预加载网络图片到本地缓存，返回Promise对象
优点：提前下载大图片到本地磁盘，后续加载时直接从本地读取，速度快于网络下载

4、ImageBackground

ImageBackground是一个复合组件，结合了View和Image的功能。该组件主要用于实现支持布局的图片加载功能。核心属性如下：

style：用于定义组件布局样式
imageStyle：用于定义内部图片样式
ref：指向组件实例的引用
imageRef：指向内部图片实例的引用

style属性控制组件布局特征：

支持所有View组件的布局属性（如width、height、flexDirection等）
imageStyle属性控制图片渲染特征：
支持resizeMode（如cover/stretch）
支持borderRadius等图片特有样式
典型配置示例：

javascript 复制代码

style={{ width: '100%', height: 150 }}  
imageStyle={{ resizeMode: 'cover', borderRadius: 12 }}

ref和imageRef

|----------|--------|-------------------------|
| 引用类型 | 指向对象 | 典型应用场景 |
| ref | 组件布局实例 | 调用View相关API（如measure） |
| imageRef | 内部图片实例 | 调用Image相关API（如prefetch） |

5、TextInput

①、字体样式属性

与Text组件一致

字号：fontSize（如20、24）
颜色：color（如red、#333）
加粗：fontWeight: 'bold'
包括下划线等装饰属性均相同

②、自动聚焦

属性：autoFocus
- true：页面加载后自动聚焦，键盘弹出
- false：默认不聚焦
API：focus()
- 需配合ref：useRef 构建 inputRef
- 示例：useEffect + setTimeout 2秒后调用 inputRef.current.focus()
- 效果：2秒后主动聚焦，键盘弹出

③、自动失焦

属性：blurOnSubmit
- true：点击提交（如"勾"）后自动失焦，键盘收起
- false：点击提交后键盘不收起
API：blur()
- 示例：useEffect + setTimeout 2秒后调用 inputRef.current.blur()
- 效果：2秒后主动失焦，键盘收起
补充：后续可操作 Keyboard API 直接控制键盘

④、隐藏光标

属性：caretHidden
- true：隐藏光标，仍可输入
- 默认值：false（显示光标）
使用场景：不常用

⑤、默认输入

属性：defaultValue
- 设置默认内容：如"默认内容"
- 效果：页面加载后自动显示，无需聚焦

⑥、可编辑性

属性：editable
- true：可编辑，可聚焦输入
- false：不可编辑，无法调起键盘
使用场景：控制输入框业务逻辑（如用户禁言、违规处罚）

⑦、键盘类型

default：常规文字输入
number pad / decimal pad：数字输入
email-address：邮箱输入（也可用 default）
phone-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）
功能：输入内容自动转为圆点（•••），隐藏明文
限制：不可与 multiline=true 同时使用

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 string"
color属性：
- 设置按钮文字颜色，如color="green"
- 接受颜色名称字符串或十六进制颜色值
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 | 开始滚动时立即隐藏键盘 | 多数列表场景的默认选择 |
| interactive | iOS专属：滚动后键盘随手势交互式隐藏 | 仅需适配iOS平台时使用 |

④、点击收起键盘keyboardShouldPersistTaps属性

控制点击非输入区域时键盘的显隐行为

|--------|-------------|-----------------|
| 属性 | 键盘行为 | 按钮响应 |
| never | 首次点击按钮时收起键盘 | 第二次点击才触发onPress |
| handed | 点击按钮不收起键盘 | 立即触发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组件实现分组吸顶。

⑥、核心API

scrollTo：滚动到指定坐标（需通过useRef获取组件实例）
scrollToEnd：滚动至列表末尾
调用示例：scrollViewRef.current.scrollTo({y: 300, animated: true})

11、FlatList

①、基础使用

组件特点：FlatList是React Native提供的高性能列表组件，相比ScrollView更适合渲染大量数据
优化原理：采用局部渲染机制，仅创建当前屏幕可见区域元素，其他区域会进行回收和复用
核心属性：必须配置三个基础属性才能正常使用：data、renderItem和keyExtractor

②、滚动属性（参考ScrollView）

contentContainerStyle与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个元素：当前可视区域最顶部的可见项
数组最后一个元素：当前可视区域最底部的可见项

⑦、滚动API

scrollToIndex()：推荐使用，通过索引定位元素
参数配置:
- index: 指定目标元素的索引（从0开始）
- viewPosition: 控制元素在视口中的位置（0顶部，0.5居中，1底部）
- animated: 是否启用动画过渡效果（true/false）
scrollToOffset()：按像素值滚动指定距离，精确控制滚动位置时使用
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}

⑤、滚动API

scrollToLocation()

特殊参数：需要同时指定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 data）

onEndReachedThreshold 属性

作用：定义触底阈值（何时触发 onEndReached）
取值范围：0 ~ 1
含义：距离底部占屏幕高度的比例
- 例如： 0.1 → 距离底部还剩10%屏幕高度时触发

Modal组件：特殊组件，用于承载弹窗内容，实现自定义弹窗
本质：容器，自身不显示UI，用于承载子元素

①、控制显示

核心属性：visible
作用：控制弹窗的显示/关闭状态

②、关闭弹窗

onRequestClose：

onRequestClose：回调方法，非关闭Modal本身
关闭方式：通过 setVisible(false) 或调用 hideModal 方法
安卓：点击物理返回键，触发 onRequestClose 回调
iOS：无物理返回键，不走 onRequestClose，通过UI交互关闭

③、背景透明

属性：transparent
作用：使Modal背景透明，露出底层页面内容

④、状态栏透明

解决方案：设置属性 statusBarTranslucent = true
效果：
- 状态栏与Modal内容融为一体
- 状态栏背景透明度与弹窗半透明背景一致
- 避免UI从状态栏处割裂

⑤、动画方式

属性：animationType
三种选项：
- none：无动画，直接弹出（默认，效果突兀）
- fade：渐变效果，渐隐渐现，较为柔和
- slide：滑动效果，从底部拉出/拉下，更自然
选型建议：
- 底部弹窗（列表、半页面）：推荐 slide
- 中间弹窗（对话框）：推荐 fade

⑥、状态回调

回调方法：
- onShow：Modal出现时触发
- onDismiss：Modal隐藏时触发

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默认）
沉浸式实现: 需配合translucent=true和透明背景色
布局调整: 启用后页面布局从屏幕最顶端开始

④、隐藏状态栏

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不同，只接受单一颜色值
动态实现：可通过三元运算符实现状态相关颜色

到这里本篇笔记就结束了，简单做个总结吧：

|--------------------------|--------|----------------|---------|
| 组件类型 | 核心功能 | 关键特性 | 应用场景 |
| View | UI构建基石 | 基础容器组件 | 所有页面布局 |
| Text | 文本显示 | 使用简单但深度复杂 | 文字内容展示 |
| Image | 图片加载 | 支持静态/网络资源 | UI视觉元素 |
| ImageBackground | 背景图片 | View+Image组合优化 | 带背景的容器 |
| TextInput | 输入交互 | 官方唯一输入组件 | 表单/搜索框 |
| TouchableOpacity | 点击反馈 | 透明度变化效果 | 通用按钮交互 |
| TouchableHighlight | 高亮反馈 | 多样化视觉效果 | 特殊按钮需求 |
| TouchableWithoutFeedback | 无效果点击 | 无视觉反馈 | 特殊场景交互 |
| Button | 标准按钮 | 预设样式 | 基础表单提交 |
| Pressable | 高级交互 | 支持复杂手势 | 自定义交互组件 |
| ScrollView | 内容滚动 | 基础滚动容器 | 长内容展示 |
| FlatList | 高性能列表 | 自动内存优化 | 大数据量渲染 |
| SectionList | 分组列表 | 多类型数据支持 | 分类数据展示 |
| RefreshControl | 刷新控制 | 下拉刷新功能 | 列表数据更新 |
| Modal | 弹窗组件 | 浮动内容容器 | 对话框/浮层 |
| StatusBar | 状态栏适配 | 系统状态栏控制 | 界面沉浸式适配 |
| Switch | 开关切换 | 二进制选择器 | 设置选项切换 |

下期再会！