美团点评 React Native 设计和实践
2020-02-27 222浏览
- 1.React Native
- 2.• 14 — APP • 07 —14
- 3.• React Native • RN • RN
- 4.RN 15 10 RN Native4 16 5 RN 9 8 VS 10 iOS1 8 Android2 20 iOS Android 4 10
- 5.RN React Native
- 6.RN APP • Native? • RN? • Native RN • RN + Native
- 7.RN Native RN APP • RN APP+Native RN Navigator Native Navigator Native Module RN Home Page R N M o d u l e R N M o d u l e R N M o d u l e Native • JS • • Native Native Navigator Native Module Native Navigator Native Module • APP
- 8.• • • RN
- 9.RN Native APP RN • JS Native APP+RN • Native Navigator Native Home Page N a t i v e N a t i v e N a t i v e M o d u l e M o d u l e M o d u l e 1MB RN 500 RN Navigator • RN Module • RN Navigator RN Module RN Navigator RN Module • KB Native APP
- 10.• iOS Android • JS • Native node_modules
- 11.Biz …… HTM Components POI Style Constants Native(iOS Android) RN Page Push …… JS Components Core UIKit Adapter Net Util …… React Native
- 12.RN View Native (1000) Native
- 13.RN Native
- 14.
- 15.• iOS chameleon • Android RNUpdate • CodePush
- 16.RN
- 17.Native NavigatorIOS JS Navigator ExNavigator infrastructure.nav igatorBar NavigationExperi mental
- 18.Native • RN • • View 1 RN Native
- 19.JS • native Push Pop • iOS Android • Android • render InteractionManager • Bridge Native
- 20.JS • • • Native Emitter
- 21.ExNavigator • Scene • Router
- 22.iOS Android if (Platform.OS === 'ios') { // … } else if (Platform.OS === 'android') { // … }
- 23.F8StyleSheet var styles = F8StyleSheet.create({button:{ios:{height:'>height:
