React Native Elements Tile 组件完全指南从三种基础用法到源码级原理解析【免费下载链接】react-native-elementsCross-Platform React Native UI Toolkit项目地址: https://gitcode.com/gh_mirrors/re/react-native-elements本指南基于react-native-elements仓库中的 Tile 官方文档 及其 Props 参考 props/tile.md 编写。Tile 是 React Native Elements 中用于展示单一主题相关内容的图块组件它以图片为视觉主体可叠加标题、说明文字、图标或嵌入任意自定义内容。读完本文你将掌握 Featured Tile、带图标 Tile 与内容型 Tile 三种用法理解全部 20 个 Props 的取值与默认行为并从packages/base/src/Tile/的源码出发弄清featured分支、默认尺寸计算、按压反馈与主题化机制等底层实现。Tile 是什么Tiles图块与 Cards 类似都是围绕单一主题展示一组相关内容的便捷容器但二者侧重不同Tile 以全幅图片作为视觉主体文字与图标直接叠加在图片之上featured 模式或位于图片下方的内容区它常被用来构建瀑布流式的图片列表、媒体卡片、商品展示块等场景。在 v3.4.2 文档中明确说明该组件的设计灵感来自 Shoutem UIShoutem 团队。自该版本以来Tile 一直是 React Native Elements 的基础组件之一当前仓库中它的实现位于基础无主题绑定实现packages/base/src/Tile/Tile.tsxfeatured 分支实现packages/base/src/Tile/components/FeaturedTile.tsx主题化绑定 Theme实现packages/themed/src/Tile/index.tsx导出入口packages/base/src/index.tsexport * from ./Tile安装与引入Tile 属于 React Native Elements 核心包。安装 react-native-elements 后即可从主包或子包引入// 经典方式v3.4.2 文档示例 import { Tile } from react-native-elements; // 当前仓库的模块化方式 import { Tile } from rneui/base; import Tile from rneui/themed; // 主题化版本默认导出其中rneui/base的 Tile 为纯基础组件packages/base/src/Tile/index.tsx 仅导出Tile与TileProps类型rneui/themed的 Tile 通过withTheme包装可读取全局主题中的组件级默认配置见下文主题化一节。三种基础用法原文档给出了三个可直接复制的经典示例分别覆盖 featured 叠加、图标叠加与自定义内容三种场景。图片资源通过require(./img/path)或{ uri: ... }对象传入imageSrc。1. Featured Tile标题叠加图块featured模式会把标题与说明文字直接覆盖渲染在图片之上是文档中的第一种用法import { Tile } from react-native-elements; Tile imageSrc{require(./img/path)} titleLorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores dolore exercitationem featured captionSome Caption Text /;要点featured为true时组件内部会改走 FeaturedTile.tsx 分支图片采用全幅背景图方式铺满整个 Tile。title与caption渲染在绝对定位的 overlay 容器内默认文字颜色为白色#ffffff、居中对齐、四周带留白左右 25、上下 45/40见 FeaturedTile.tsx。标题默认使用h4字号仅当你同时传入titleStyle且其中包含fontSize时才改用自定义字号源码判断h4{!titleStyle || !(fontSize in titleStyle)}见 Tile.tsx 与 FeaturedTile.tsx。2. Featured Tile with Icon带图标的图块在 featured 基础上增加一个居中图标例如播放按钮适合做视频/媒体入口import { Tile } from react-native-elements; Tile imageSrc{require(./img/path)} icon{{ name: play-circle, type: font-awesome }} featured /;图标通过icon对象配置其结构为{ name, color, size, type, iconStyle }。其中type默认是material也可换成 React Native Elements 支持的任意图标集如font-awesome、ionicon、material-community等可参考 icon.md 中的可用图标集列表。图标最终由 Icon 组件 渲染位于 overlay 容器内、标题上方并整体居中FeaturedTile.tsx。3. Tile with Icon内容型图块不开启featured时Tile 由图片区 底部内容区组成children会渲染在内容区内适合放入自定义 Caption、按钮或其他元素import { Tile } from react-native-elements; Tile imageSrc{require(./img/path)} titleLorem ipsum dolor sit amet, consectetur icon{{ name: play-circle, type: font-awesome }} // optional contentContainerStyle{{ height: 70 }} View style{{ flex: 1, flexDirection: row, justifyContent: space-between }} TextCaption/Text TextCaption/Text /View /Tile;要点非 featured 分支的渲染逻辑在 Tile.tsx外层为Pressable内部依次为图片组件默认resizeModecover铺满、居中的图标容器、底部内容容器。底部内容容器默认内边距为15/5/15/15Tile.tsx可通过contentContainerStyle覆盖例如示例中把它固定为height: 70。title渲染为Text带testIDtileTitlechildren紧随其后二者共同构成内容区。Props 完整参考含类型与默认值以下信息完整继承自 v3.4.2 的 props/tile.md并与当前源码逐一核对。此外Tile 还会接收所有 TouchableNativeFeedbackAndroid或 TouchableOpacityiOS的触摸相关 Props——在当前仓库实现中TileProps直接继承自PressablePropsTile.tsx因此onPress、disabled、delayPressIn等 Pressable 属性均可透传。Prop类型默认值说明activeOpacitynumber0.2按压时的透明度/高亮系数captionstring或React 元素/组件无featured 模式下显示在 Tile 上的说明文字captionStyleobject (style)无caption 的样式仅当caption为字符串时生效containerStyleobject (style)无最外层 Tile 容器的样式contentContainerStyleobject (style)无非 featured 模式下底部内容区的样式featuredbooleanfalse切换为图片叠加文字的 featured 外观heightnumberDevice Width × 0.8Tile 高度iconobject无图标配置{name: string, color: string, size: number, type: string默认 material或选择支持的图标集, iconStyle: object(style)}iconContainerStyleobject (style)无图标外层容器的样式ImageComponentReact 组件或元素BackgroundImage自定义图片渲染组件imageContainerStyleobject (style)无图片区域的样式imagePropsobjectImage Props 子集无传给图片的额外属性例如resizeMode完整属性见 image.mdimageSrcobject (image)必填图片来源require(...)或{ uri: ... }onPressfunction (event)无Tile 被按下时回调overlayContainerStyleobject (View style)无featured 模式下 overlay 容器的样式titlestring无Tile 上的标题文本titleNumberOfLinesnumber无标题的最大行数titleStyleobject (style)无标题的样式widthnumberDevice WidthTile 宽度说明height的默认值在文档中写作 Device Width × 0.8当前源码实现为height width * 0.8Tile.tsxwidth默认取Dimensions.get(window).width即屏幕窗口宽度。源码级原理解析featured分支与图片渲染差异Tile组件的入口根据featured做分支Tile.tsxfeatured true把title/icon/caption/children/imageSrc/onPress/activeOpacity/containerStyle/imageContainerStyle/overlayContainerStyle/titleStyle/captionStyle/width/height/imageProps/ImageComponent打包传给FeaturedTile。此时图片使用 BackgroundImage见 FeaturedTile.tsx并配合绝对定位、铺满整个 Tile 的 overlay 容器position: absolutetop/left/right/bottom: 0FeaturedTile.tsx实现文字浮于图片之上。否则走普通分支图片使用 React Native Elements 自带的 Image 组件ImageComponent ImageTile.tsx图片区域占flex: 2底部内容区自适应。因此 Props 文档中ImageComponent的默认值标注为 BackgroundImage 是针对 featured 模式而言的。默认尺寸与图片裁切不传width/height时Tile 默认占满整屏宽、高度为宽度的 80%width * 0.8。图片统一使用resizeModecover填充Tile.tsx、FeaturedTile.tsx即等比放大并裁切超出部分保证任意尺寸的图片都能铺满 Tile 且不变形。如果你需要不同的裁切策略可通过imageProps{{ resizeMode: contain }}覆盖。按压反馈从 Touchable 到 Pressablev3.4.2 文档说明 Tile 会透传TouchableNativeFeedbackAndroid/TouchableOpacityiOS的 Props在当前仓库的基础实现中组件已改用 React Native 的Pressable作为触摸根节点Tile.tsxTileProps extends PressableProps。一个值得注意的实现细节是Android 水波纹颜色由主题主色与activeOpacity共同计算而来android_ripple: androidRipple( Color(theme?.colors?.primary).alpha(activeOpacity).rgb().toString() )见 Tile.tsx。也就是说activeOpacity在 Android 上会直接影响 ripple 高亮的透明度文档标注的默认值 0.2 即对应默认按压高亮强度。主题化组件级默认配置通过rneui/themed引入的 Tile 由withTheme(Tile, Tile)包装packages/themed/src/Tile/index.tsx因而可以在全局主题中为 Tile 声明默认 Props例如给所有 Tile 统一设置默认标题const theme { Tile: { title: Mary is friendly, }, };这在 packages/themed/src/Tile/tests/Tile.test.tsx 中有对应测试传入上述主题后渲染出的Text子节点内容即为Mary is friendly。同理FeaturedTile也有独立的主题键FeaturedTile两者可分别配置。组件测试仓库为 Tile 提供了完整的快照与行为测试可作为自定义扩展时的参考packages/themed/src/Tile/tests/Tile.test.tsx验证基础渲染仅传imageSrc{{ uri: http://google.com }}与主题默认 Props 应用packages/themed/src/Tile/tests/FeaturedTile.test.tsx覆盖 featured 分支快照文件packages/themed/src/Tile/tests/snapshots/Tile.test.tsx.snap。实战建议与注意事项imageSrc是唯一必填项其余 Props 均有合理默认最小可用的 Tile 只需一行Tile imageSrc{require(./img)} /。featured 模式与普通模式渲染结构完全不同需要文字压图用featured需要图片上方图标 下方文字/自定义内容用普通模式并通过contentContainerStyle控制内容区高度与间距。图标集选择icon.type默认material其它图标集如font-awesome、ionicon需要对应的图标字体已注册具体可用集合见 icon.md。按需覆盖图片行为通过imageProps传入resizeMode、borderRadius等 Image 属性或通过ImageComponent换成自定义加载组件如占位图/模糊加载实现。标题截断长标题配合titleNumberOfLines限制行数避免撑破布局标题默认h4字号传入含fontSize的titleStyle后即完全由你控制。交互onPress直接可用如需禁用点击可透传 Pressable 的disabled属性。若想快速试验各 Props 的效果官方 playground 配置见 website/playground/Tile/tile.playground.tsx它基于react-view对上述全部 Props 提供了可视化调参入口。【免费下载链接】react-native-elementsCross-Platform React Native UI Toolkit项目地址: https://gitcode.com/gh_mirrors/re/react-native-elements创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考