React Native: Learn & Practice

Code Play

包含广告

关于此应用

通过简明扼要的讲解、实用的代码示例和小挑战来学习 React Native。探索 10 个模块共 148 个课程，在代码游乐场中打开示例并进行修改，以了解界面的工作原理。

从基础到实践的清晰路径

从文本、视图、变量、组件、图像和样式入手。继续学习 Flexbox 布局、表单、文本输入、按钮、触摸交互、滚动和列表。后续模块将介绍 Hooks、可重用组件、状态管理、性能优化概念、响应式布局和实践项目。

先阅读概念再进行编辑

每个课程都包含学习目标、通俗易懂的概述、关键概念、代码、实用技巧、小挑战和自测题。查看示例及其解释，准备好进行实验时，再打开可编辑版本。“初级”、“中级”和“实践”标签可帮助您了解每个主题在课程中的位置。

尝试自己的修改

使用内置的 JavaScript 和 JSX 编辑器来调整文本、值、样式和组件行为。语法高亮和行号让示例更容易理解。撤销和重做功能可帮助您探索更改，而重置代码功能则可将示例恢复到初始状态。点击“运行应用”即可打开应用内预览，然后返回编辑界面进行另一次尝试。

探索实用模式

学习受控输入、表单验证、密码可见性、字符计数器、列表筛选、可选项目和空状态。练习使用计数器、计时器、实时时钟、温度转换器、小费计算器、卡片、手风琴、简易标签页和迷你待办事项列表。这些学习示例可让您了解界面各个部分是如何组合在一起的。

查找所需课程

搜索课程标题或按模块缩小课程库范围。在所有课程、学习中课程、已保存的收藏课程和已完成课程之间切换。使用“上一课”和“下一课”控件或在课程之间滑动。从筛选后的课程库中打开课程时，导航会跟随您选择的课程，以便您始终关注所选主题。

记录您的学习进度
将课程添加书签以便复习，并在准备就绪后将其标记为已完成。主屏幕显示课程进度、已完成和已保存的课程数量以及学习连续天数。您可以继续上一课或学习下一个未完成的主题。进度和书签都存储在您的设备本地。

返回您的实验

运行示例会将代码保存为该课程的本地草稿。重新打开 Playground 即可恢复草稿，或将其重置以返回原始代码。这样，即使休息一段时间后，您也可以轻松地重新学习某个想法，而无需替换初始材料。

选择舒适的界面

您可以选择浅色模式、深色模式或系统主题来设置学习界面。阅读概念，查看代码，进行一次重点修改，然后利用挑战来练习应用。

专为学生、对编程感兴趣的初学者以及正在复习移动界面概念的开发人员而设计。示例在基于 Web 的预览中运行；特定于平台的 API 和行为可能与原生应用有所不同。该应用包含广告。这是一个独立的教育应用；与 React Native 项目无关，也未获得其认可。