react-native

react-native

• GitHub
• 文档
• 中文文档

开发环境

只能在 Mac 下开发，所以 Windows 需要用 VMWare 安装 mac OS.

新建工程

• react-native-cli
• Use yarn when available

new react-native - uses yarn

To run your app on iOS:
   cd /Users/Bell/react-native/ytest
   react-native run-ios
   - or -
   Open /Users/Bell/react-native/ytest/ios/ytest.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), or a device connected
   cd /Users/Bell/react-native/ytest
   react-native run-android

IDE

推荐用 WebStorm。

• File->Settings->Languages&Frameworks->JavaScript JavaScript language version选择JSX Harmony

• Using External tools: ESLint autofix and React Native

热更新

• CodePush

布局

• FLex css3 新属性

框架

• Flux 单向数据流动,即永远只有从模型到视图的数据流动

• Redux 由 Flux 演变而来，后来受 Elm 启发，去掉了 Flux 的复杂性

• Redux 中文文档

Issue

• ListView渲染问题

异常收集

• sentry for react native
• bugsnag for react native
• Add Crashlytics to your React Native iOS app CLS_LOG 在崩溃的时候把 console 日志显示出来
• react-native-fabric-crashlytics 利用 Crashlytics 记录 js 异常信息

生成 source map

react-native bundle --platform ios --entry-file index.ios.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./ios/sourcemap.js

源码分析

Android

• React Native与Android原生通信交互详情
• React Native Android 从学车到补胎和成功发车经历
• React Native Android 源码框架浅析（主流程及 Java 与 JS 双边通信）
• ReactNative Android源码分析
• React Native通讯原理

iOS

• ReactNative iOS源码解析（一）
• ReactNative iOS源码解析（二）
• Talk about ReactNative Image Component

References

• The New React Native Architecture Explained