10分钟快速上手react-native-app-tourReact Native安装配置完整指南与首次App Tour实战【免费下载链接】react-native-app-tourReact Native: Native App Tour Library项目地址: https://gitcode.com/gh_mirrors/re/react-native-app-tour还在为 React Native 应用的新手引导发愁吗react-native-app-tour是一个 React Native 原生 App Tour 引导库一套 API 即可在 Android 与 iOS 上展示炫酷的聚光灯式功能导览10分钟即可完成安装配置并跑通第一次 App Tour。一、react-native-app-tour 是什么react-native-app-tour 是一个桥接原生引导组件的 React Native 库底层分别封装了 Android 的 TapTargetView 与 iOS 的 MaterialShowcase因此导览效果与原生应用完全一致性能与动画都无可挑剔。它能帮你做什么✅聚焦目标用聚光灯高亮某个按钮或区域其余部分自动变暗✅顺序导览按你指定的顺序逐步讲解多个组件✅跨平台同一套 JS 代码Android / iOS 通用✅轻量易用核心 API 只有 3 个——AppTourView、AppTourSequence、AppTour核心实现位于 RNAppTour.jsJS 层会校验每个目标是否带key与order再桥接到原生模块 RNAppTourModule.java 和 RNAppTour.m。二、安装前准备 开始安装前请确认以下环境已就绪依赖项版本要求说明Node.js任意较新版本JS 运行环境React Native61 及以上官方支持版本CocoaPodsiOS 必需用于 iOS 原生依赖管理 CocoaPods 未安装时可先执行sudo gem install cocoapodsmacOS 常用 Homebrew 安装。三、react-native-app-tour 安装教程3 步完成第 1 步获取示例工程仓库自带完整的 Android/iOS 双端示例Example/App.js建议先跑起来感受效果git clone https://gitcode.com/gh_mirrors/re/react-native-app-tour cd react-native-app-tour/Example npm install第 2 步安装库到已有项目npm install react-native-app-tour --save第 3 步配置 iOS打开ios/Podfile示例见 Podfile加入下面内容然后执行pod updateuse_native_modules! pod RNAppTour, :path ../node_modules/react-native-app-tour/ios use_frameworks! :linkage :static pod MaterialShowcase配置完成后用 Xcode 打开ios/Example.xcworkspace在 General 面板确认 Bundle Identifier 与 Signing 配置如下图所示即可编译运行配置 Android在应用级build.gradle示例见 build.gradle的allprojects中加入 jitpack 仓库allprojects { repositories { maven { url https://jitpack.io } } }四、首次 App Tour 实战 安装完成后我们来看 3 个最小用法。核心 API 全部从react-native-app-tour导出定义见 RNAppTour.js。1. 高亮单个组件ShowFor给组件加ref再用AppTourView.for()生成目标最后ShowFor展示import { AppTourView, AppTour } from react-native-app-tour; onPress{() { const target AppTourView.for(this.button1, { order: 1, title: 这是第一个目标, description: 点我查看详情, outerCircleColor: #f24481 }); AppTour.ShowFor(target); }}2. 多组件顺序导览ShowSequence用AppTourSequence把多个目标串成一次完整导览按order从小到大依次展示完整示例见 Example/App.jslet sequence new AppTourSequence(); this.appTourTargets.forEach(target sequence.add(target)); AppTour.ShowSequence(sequence);3. 必传的 2 个属性 ⚠️order数字决定导览顺序缺失会直接抛错key每个参与导览的组件必须带key属性这是硬性要求更多属性title、description、targetRadius、cancelable等见 README.md 的属性表格。五、双端常用 Props 速查 双端通用Prop说明默认值title/description标题 / 描述文案-outerCircleColor/targetCircleColor外圈 / 目标圈颜色-targetRadius目标半径 (dp)60cancelable点击空白是否可关闭trueorder导览顺序必传-Android 独有完整清单见 README.mdcollapsableView 仅包含子组件时必传false、dimColor、drawShadow、transparentTarget。iOS 独有backgroundPromptColor、titleTextAlignment、aniComeInDuration、aniGoOutDuration等可精细控制动画与排版。六、常见问题速查表 ️问题原因解决方案postinstall failed在项目根目录外安装或 Pods 版本过期移除后重装执行pod repo updateAndroid 报 Trying to resolve view with tag which doesnt exist目标 View 缺少collapsable配置给该 View 加collapsable: false导览不出现组件缺key或 props 缺order补齐这两个必传属性完整问题列表见 README.md 的 ISSUES 章节。七、总结 到这里你已经完成了 react-native-app-tour 的安装配置并完成了第一次 App Tour 实战npm install react-native-app-tour --save安装库 iOS 修改Podfilepod update Android 添加 jitpack 仓库⚡ 三步核心调用AppTourView.for()→AppTourSequence.add()→AppTour.ShowSequence()打开 Example/App.js 跑一遍双端示例你会看到一个自动播放、按序高亮的完整导览。把它的思路套用到你的项目10分钟就能给新用户提供原生级的第一印象。 项目结构速览RNAppTour.jsJS API 入口、android/src/main/java/ui/apptour/Android 原生模块、ios/RNAppTour.miOS 原生实现、Example/双端完整示例应用。【免费下载链接】react-native-app-tourReact Native: Native App Tour Library项目地址: https://gitcode.com/gh_mirrors/re/react-native-app-tour创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/8/23 15:31:41 · 阅读 1.2k 10分钟快速上手react-native-app-tour：React Native安装配置完整指南与首次App Tour实战
10分钟快速上手react-native-app-tourReact Native安装配置完整指南与首次App Tour实战【免费下载链接】react-native-app-tourReact Native: Native App Tour Library项目地址: https://gitcode.com/gh_mirrors/re/react-native-app-tour还在为 React Native 应用的新手引导发愁吗react-native-app-tour是一个 React Native 原生 App Tour 引导库一套 API 即可在 Android 与 iOS 上展示炫酷的聚光灯式功能导览10分钟即可完成安装配置并跑通第一次 App Tour。一、react-native-app-tour 是什么react-native-app-tour 是一个桥接原生引导组件的 React Native 库底层分别封装了 Android 的 TapTargetView 与 iOS 的 MaterialShowcase因此导览效果与原生应用完全一致性能与动画都无可挑剔。它能帮你做什么✅聚焦目标用聚光灯高亮某个按钮或区域其余部分自动变暗✅顺序导览按你指定的顺序逐步讲解多个组件✅跨平台同一套 JS 代码Android / iOS 通用✅轻量易用核心 API 只有 3 个——AppTourView、AppTourSequence、AppTour核心实现位于 RNAppTour.jsJS 层会校验每个目标是否带key与order再桥接到原生模块 RNAppTourModule.java 和 RNAppTour.m。二、安装前准备 开始安装前请确认以下环境已就绪依赖项版本要求说明Node.js任意较新版本JS 运行环境React Native61 及以上官方支持版本CocoaPodsiOS 必需用于 iOS 原生依赖管理 CocoaPods 未安装时可先执行sudo gem install cocoapodsmacOS 常用 Homebrew 安装。三、react-native-app-tour 安装教程3 步完成第 1 步获取示例工程仓库自带完整的 Android/iOS 双端示例Example/App.js建议先跑起来感受效果git clone https://gitcode.com/gh_mirrors/re/react-native-app-tour cd react-native-app-tour/Example npm install第 2 步安装库到已有项目npm install react-native-app-tour --save第 3 步配置 iOS打开ios/Podfile示例见 Podfile加入下面内容然后执行pod updateuse_native_modules! pod RNAppTour, :path ../node_modules/react-native-app-tour/ios use_frameworks! :linkage :static pod MaterialShowcase配置完成后用 Xcode 打开ios/Example.xcworkspace在 General 面板确认 Bundle Identifier 与 Signing 配置如下图所示即可编译运行配置 Android在应用级build.gradle示例见 build.gradle的allprojects中加入 jitpack 仓库allprojects { repositories { maven { url https://jitpack.io } } }四、首次 App Tour 实战 安装完成后我们来看 3 个最小用法。核心 API 全部从react-native-app-tour导出定义见 RNAppTour.js。1. 高亮单个组件ShowFor给组件加ref再用AppTourView.for()生成目标最后ShowFor展示import { AppTourView, AppTour } from react-native-app-tour; onPress{() { const target AppTourView.for(this.button1, { order: 1, title: 这是第一个目标, description: 点我查看详情, outerCircleColor: #f24481 }); AppTour.ShowFor(target); }}2. 多组件顺序导览ShowSequence用AppTourSequence把多个目标串成一次完整导览按order从小到大依次展示完整示例见 Example/App.jslet sequence new AppTourSequence(); this.appTourTargets.forEach(target sequence.add(target)); AppTour.ShowSequence(sequence);3. 必传的 2 个属性 ⚠️order数字决定导览顺序缺失会直接抛错key每个参与导览的组件必须带key属性这是硬性要求更多属性title、description、targetRadius、cancelable等见 README.md 的属性表格。五、双端常用 Props 速查 双端通用Prop说明默认值title/description标题 / 描述文案-outerCircleColor/targetCircleColor外圈 / 目标圈颜色-targetRadius目标半径 (dp)60cancelable点击空白是否可关闭trueorder导览顺序必传-Android 独有完整清单见 README.mdcollapsableView 仅包含子组件时必传false、dimColor、drawShadow、transparentTarget。iOS 独有backgroundPromptColor、titleTextAlignment、aniComeInDuration、aniGoOutDuration等可精细控制动画与排版。六、常见问题速查表 ️问题原因解决方案postinstall failed在项目根目录外安装或 Pods 版本过期移除后重装执行pod repo updateAndroid 报 Trying to resolve view with tag which doesnt exist目标 View 缺少collapsable配置给该 View 加collapsable: false导览不出现组件缺key或 props 缺order补齐这两个必传属性完整问题列表见 README.md 的 ISSUES 章节。七、总结 到这里你已经完成了 react-native-app-tour 的安装配置并完成了第一次 App Tour 实战npm install react-native-app-tour --save安装库 iOS 修改Podfilepod update Android 添加 jitpack 仓库⚡ 三步核心调用AppTourView.for()→AppTourSequence.add()→AppTour.ShowSequence()打开 Example/App.js 跑一遍双端示例你会看到一个自动播放、按序高亮的完整导览。把它的思路套用到你的项目10分钟就能给新用户提供原生级的第一印象。 项目结构速览RNAppTour.jsJS API 入口、android/src/main/java/ui/apptour/Android 原生模块、ios/RNAppTour.miOS 原生实现、Example/双端完整示例应用。【免费下载链接】react-native-app-tourReact Native: Native App Tour Library项目地址: https://gitcode.com/gh_mirrors/re/react-native-app-tour创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考