微信号:frontshow

介绍:InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。

这里有25个React Native免费教程,请您查收~

2018-03-09 17:59 Martin 译

作者|CodeBurst.io
译者|Martin

一位名为 CodeBurst.io 的作者为 React Native 开发者提供了 25 个教程,相信不管是刚入门的新手,还是有经验的老手,都能从这些教程中找到适合自己的学习资源提升自己。

一般性的教程
  1.React Native——究竟有多原生?

由 Vishal Dubey 提供的教程,对 Android 和 iOS 平台的 React Native 进行了对比。

教程地址:

https://codeburst.io/react-native-how-native-have-you-been-9ebb08383474

  2. React Native 与真实原生 App 的对比

由 Weblab 科技提供的教程,对比了 React 与 Swift 二者之间的不同点,包括对 CPU、GPU 和内存的使用方式。

教程地址:

https://codeburst.io/react-native-vs-real-native-apps-ad890986f1f

  3. 解密 React Native 开发

由 John Tucker 提供的教程,作者在比较了三种 React Native 开发方式之后,认为 Expo 是最好的。

教程地址:

https://codeburst.io/untangling-react-native-development-7285ed0b6525

  4. React Native 开发奇事

由 Martin Adamko 提供的教程,在开始 React Native 开发之前应该知道的那些事。

教程地址:

https://codeburst.io/react-native-quirks-2fb1ae0bbf80

  5. React Native 调试工具

由 Vince Yuan 提供的教程,介绍了如何调试 React Native 应用和用于调试的 GUI 工具。

教程地址:

https://codeburst.io/react-native-debugging-tools-3a24e4e40e4

  6. 使用 React Native、GraphQL 和 Relay Modern 开发 App

由 Luiz Fernando 提供的教程,介绍如何使用 GraphQL 和 Realy Modern 搭建 React Native 开发环境。

教程地址:

https://codeburst.io/how-to-setup-a-react-native-graphql-relay-modern-a6a5f6c18353

性能相关的教程
  7. 给 React Native 应用程序提速的六种方式

由 Atinder Singh 提供的教程,介绍了六种提升 React Native 应用程序 FPS 的方法。

教程地址:

https://codeburst.io/6-simple-ways-to-speed-up-your-react-native-app-d5b775ab3f16

  8. React Native 内联样式与样式组件的性能比较

由 JM Myers 提供的教程,对 React Native 内联样式与样式组件的性能进行了对比。

教程地址:

https://codeburst.io/a-quick-performance-comparison-of-styled-components-vs-inline-styles-in-react-native-e07adffd14cb

  9. 通过可视化的方式发现和解决 React Native 性能问题

由 Purvak Pathak 提供的教程,他运行了 20 多个 React Native 应用程序,通过可视化的方式找出了它们共同存在的性能问题。

教程地址:

https://codeburst.io/a-visual-guide-to-react-native-performance-issues-and-resolving-insights-ccb0fc3fbcda

动画相关的教程
  10. 在 React Native 中使用自定义动画开发地图程序

由 Jason Brown 提供的教程,深入介绍如何在 React Native 中使用自定义动画开发地图程序。

教程地址:

https://codeburst.io/build-a-map-with-custom-animated-markers-and-region-focus-when-content-is-scrolled-in-react-native-efb3522d9445

  11. React Native 中的水平滚动动画

由 Bi Yoo 提供的教程,介绍如何在 React Native 中结合使用动画和 ScrollView 创建好看的页面切换效果。

教程地址:

https://codeburst.io/horizontal-scroll-animations-in-react-native-18dac6e9c720

  12. 使用 CSS 和样式组件让 React 组件动起来

由 Kyle Truong 提供的教程,介绍如何结合使用 CSS 和样式组件来给 React 组件添加样式和动画效果。

教程地址:

https://codeburst.io/animating-react-components-with-css-and-styled-components-cc5a0585f105

  13. 在 React Native 中开发多选项滑动开关

由 Victor K Varghese 提供的教程,介绍了如何基于 60 帧动画设计和开发功能性组件。

教程地址:

https://codeburst.io/developing-multi-slider-switch-in-react-native-a15b83b29828

其他教程
  14. 通过 Netflix Clone 示例来学习 Expo React Native 和样式组件

由 JM Myers 提供的教程,通过 Netflix Clone 示例学习如何使用 React Navigation 和 Expo。

教程地址:

https://codeburst.io/getting-started-with-expo-react-native-and-styled-components-using-a-netflix-clone-example-652c7cb2a794

  15. 使用 React Native 开发 ToDo 应用程序

由 Ahmed Mahmoud 提供的教程,手把手教你如何开发一个最基本的 React Native 应用程序。

教程地址:

https://codeburst.io/todo-app-with-react-native-f889e97e398e

  16. 使用 react-native-maps 渲染谷歌地图

由 Kirsten Swanson 提供的教程,介绍如何使用 react-native-maps 来渲染谷歌地图。

教程地址:

https://codeburst.io/react-native-google-map-with-react-native-maps-572e3d3eee14

  17. 使用 Firebase 推送通知

由 William Candillon 提供的教程,介绍如何在 React Native 中实现通知推送。

教程地址:

https://codeburst.io/react-native-push-notifications-with-firebase-1f23c4f0af65

  18. 使用 react-navigation 和 redux 开发应用导航栏

由 Dan Parker 提供的教程,详细介绍了如何使用 react-navigation,并使用 redux 来管理导航栏状态。

教程地址:

https://codeburst.io/react-navigation-with-complete-redux-state-management-tab-bar-and-multiple-navigators-ed30a69d9a4d

  19. 在 React Native 应用程序中使用 Facebook SDK 登录模块和 Firebase

由 Pop Robert 提供的教程,介绍了如何集成 Facebook SDK 登录模块,并将注册用户的信息保存到 Firebase 数据库中。

教程地址:

https://codeburst.io/react-native-app-with-facebook-sdk-login-and-firebase-storage-606744701207

  20. 如何在两天内使用 Clarifai 开发一个具有视觉识别功能的 React Native 应用程序

由 Leonardo Balland 提供的教程,手把手教你如何在两天内开发出一个视觉识别应用程序。

教程地址:

https://codeburst.io/how-to-build-a-visual-recognition-mobile-app-in-2-days-with-react-native-and-clarifai-3801f0901704

  21. 使用 Expo、React Native 和 Redux 开发一款简单的游戏

由 Ali Alaa 提供的教程,介绍如何使用 Expo、React Native 和 Redux 开发一款简单的游戏。

教程地址:

https://codeburst.io/how-i-created-a-simple-game-with-expo-react-native-redux-cf4f0580f7f3

  22. 四个在 React Native 中使用谷歌地图的建议

由 Ginny Fahs 提供的教程,在使用谷歌地图时的四个建议。

教程地址:

https://codeburst.io/4-tips-for-using-the-google-maps-api-with-react-native-46d8fa863eba

  23. React Native 的端到端测试

由 Ahmed Mahmoud 提供的教程,介绍如何在 React Native 进行端到端的测试。

教程地址:

https://codeburst.io/react-native-end-to-end-testing-made-easy-b275ed00ce73

  24. 使用 React Native 和 Hasura 开发登录功能

由 Divyanshu Kumar 提供的教程,使用本地状态代替 Redux 开发登录功能。

教程地址:

https://codeburst.io/making-a-login-app-using-react-native-and-hasura-without-redux-bb31d102038d

  25. 使用 Expo、样式组件和 Redux-Saga 开发 Reddit 阅读器

由 JM Myers 提供的教程,介绍如何使用 Expo、样式组件和 Redux-Saga 开发一款 Reddit 阅读器。

教程地址:

https://codeburst.io/creating-a-reddit-reader-in-react-native-with-expo-styled-components-and-redux-saga-21e7fffba20e

  原文链接:

https://codeburst.io/25-react-native-tutorials-5b613e3f46ac

 移动开发前线

「移动开发前线」是 InfoQ 旗下关注移动开发技术的垂直社群。投稿请发邮件到 editors@cn.infoq.com,注明“移动开发前线投稿”。

  活动推荐

视频、3D、机器学习、算法工程化、IOT、智能硬件等新的命题正在被提出,丰富的内容生态以及内容形式在给传统开发的模式和线上的稳定性带来了新的挑战,而怪物级 APP 的移动开放生态也使得越来越多的移动开发者开始围绕着生态进行开发。QCon 北京 2018 会挑选部分话题来给大家分享,包括像跳一跳这样的全民小游戏的开发经验和思路,希望可以启发大家关于新移动技术的发展方向。

目前八折报名最后一周,立减 1360 元,有任何问题欢迎咨询购票经理 Hanna,电话:15110019061,微信:qcon-0410。

 
前端之巅 更多文章 开发者吐槽:Android开发就像“大便三明治” 致移动开发前线读者 Swift 4.2进入最后开发阶段,为Swift 5铺平道路 滴滴出行跨地域 iOS 构建优化与持续集成 RedMonk发布编程语言排行榜:Swift成为全球增长最快的编程语言
猜您喜欢 Go语言并发模型:使用 context paxos算法证明过程 适合新手的Linux发行版:PCLinuxOS Conference案例分析系列之 - 架构设计 【小数乱弹】关系好到一定程度,也不一定非要在一起