属性	分配逻辑	宽度计算依据
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控制视图属性需等待重绘周期，而该方法能绕过渲染流程直接操作原生组件。性能优化时该方法可作为备选方案，尤其在动画或高频属性更新场景中。

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等图片特有样式
典型配置示例：

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%屏幕高度时触发

14、Modal

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	开关切换	二进制选择器	设置选项切换