React Native 实践

1. 手机浏览器直接加载网页

最早的Hybrid

2. 直接在app里加载H5网页；

hybrid方案

react/vue/angular: html + css + js => bundle.js

webview: 嵌入式浏览器

在app里面嵌入了一个浏览器

opencamera: Native => ios/andriod

// JSB:
window.luyiAppWebview['opencamera'](params, (res) => {

})

// URL scheme:
luyi: xxx/xxx/xx?id=opencamera&xxx=xxx

3. React Native

react / vue / angular

JS Core: chrome v8、firefox、safari

浏览器的执行引擎，负责翻译react/vue等js代码

宿主环境：浏览器 / Node

• Web开发，其实就是用JS的语法，调用浏览器的window, document，...api

• Node开发，其实就是用JS语法，调用操作系统的API: fs,path, http, net,...

// RN代码

<View>

</View>

• 未来：新的架构

前端vue代码 =》 codegen生成能和c++直接通信的代码，解决了异步通信的问题

备注

• React Native 实现原理梳理一下？

• RN跟普通web开发的区别？RN跟React的区别？

  1. RN宿主环境是手机端，React宿主环境是Web端

• Fultter? Hybrid开发？

• 用RN实现一个简单的项目？

  • 装沙盒环境

收藏

• React Native 中文网 (opens new window)

• 30天React Native入门 (opens new window)

• RN进阶学习项目：react-native-eyepetizer (opens new window)

• RN学习笔记：React Native 研究与实践 (opens new window)

• React Native UI (opens new window)

• icon库：react-native-vector-icons (opens new window)

• Ant Design Mobile RN of React (opens new window)

一个基于 React Native 的 UI 组件库，是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务。

• 2022 年 JavaScript 明星项目 (opens new window)