search

lampkid / blog

the Source of My blog generated by hexo
1 stars 0 forks source link

React Native的入坑研究笔记 #12

Open lampkid opened 6 years ago

lampkid commented 6 years ago

研究要点

RN之前需要了解的？

React/Redux Flexbox layout

Typescript/flow/babel/metro bundler Static Analysis：Eslint/prettier

Android/iOS knowledge DLS：Design Language System

RN需要学习的

  1. philosophy Cross-Platform
  2. RN RUNTIME: JSCore
  3. debugging/hot reloading
  4. SharedElement transitions
  5. Lottie
  6. Animations
  7. Crash Monitoring
  8. Native Bridge: communicate between native and RN
  9. Gestures
  10. Long lists: FlatList/RecycleView/UICollectionView

RN需要关注的

Performance flexbox engine ：yoga App Size Initialization Time: runtime initialization Initial Render Time RN upgrading Accessiblity

正文

React Native的诞生

React Native的哲学

什么时候该考虑React Native

不同团队对RN的态度是不一样，有经验的团队自然会觉得RN很赞，自然也有团队会后悔使用RN。

使用RN中可能遇到的挑战

  • RN本身还不稳定，发展变化很快。
  • 使用RN一方面要构建RN工程化体系，一方面要开发新特性。
  • 开发环境和生产环境调试方法偶尔不一致。开发环境需要同时维护三套包括RN、iOS、Android。
  • 遇到问题时，我们很难知道这是由于哪个团队造成的，还是RN本身的bug导致的。
  • RN要有非常好的用户体验，要求开发人员对各种平台都很了解。有时候需要写一些native组件，有时候调试问题时，会跟进到native本身上。移动端团队构建上并不能完全脱离Android、iOS工程师。
  • 团队决策：团队招聘是否需要招聘native工程师、不同团队怎么合作、native、RN、h5间如何共享app状态、如何保证跨平台调试、如何保证整个app的测试质量、如何决定使用哪个平台开发新功能等等。

我们使用RN想达到什么目标，RN是否能满足？RN是否适合你的团队

  • 迭代快
  • 统一的质量标准
  • 多平台，写一套代码
  • 提升开发体验、包括构建、调试等
  • Native App中混合RN
  • 工程师专长

参考

React Native in airbnb

lampkid commented 6 years ago

从头认识React Native

Native的方案都有哪些、各自区别

React Native的哲学

NOT：write once，run everywhere BUT： learn once，write anywhere

你需要提前了解的技术

ES6、React、Flow

开发环境

requirements

  • build: node
  • file watcher: watchman
  • xcode ： build ios app

react-native-cli

  • reload manually, live reload, hot reloading的区别
  • Remote JS debugging ：web worker
  • metro bundler expo-cli

React Native如何集成到已有native App中

官方

RN

组件

  • 交互组件
  • 展示组件
  • 容器组件 样式与布局
  • StyleSheet/flex 特定平台的处理
  • 官方提供了部分iOS和Android平台组件。
  • 平台和平台版本判断API
  • 自定义组件文件命名问题： MyButton.ios.js/MyButton.android.js/MyButton.native.js/MyButton.js

如何运行与发布RN App

如何验证react native 是native app？

xcode debug/view debugging/capture view hierarchy

了解原生App

了解原生App开发，会让我们更好更深入地理解RN。 从RN生成的ios目录和android目录开始了解。

多端统一方案

Demo

simple demo

nav demo

参考

https://www.raywenderlich.com/485-react-native-tutorial-building-ios-apps-with-javascript