React Native ​

React Native 是通过一套代码开发Android、iOS APP的跨平台应用开发方案。

在官方维护Android、iOS的基础上，社区扩展支持了MacOS、Windows、微信小程序、tvOS、Web、Qt等平台。

React Native 的开发体验是完整的 JavaScript 开发体验，包括开发、调试、单元测试。但生产环境打包流程仍是原生流程。

结构 ​

组件 ​

类似小程序开发，官方通过 react-native 提供了特定的组件用于绘制界面，分为两类：

• 核心组件：在Android、iOS都能使用的组件
• Android组件：Android平台特有的组件，一般是iOS平台不支持且不容易实现的组件
• iOS组件：iOS平台特有的组件，一般是平台特色问题的解决方案，如 SafeAreaView

样式 ​

在官方组件上使用style属性设置样式，仅Text、View等少数组件支持设置样式，仅支持部分常用的CSS样式。

使用时需参考官方文档支持的样式属性，且例如 Button 这种常用的组件不支持 style，仅支持设置 color，导致实际使用时需要通过View 设置 onStartShouldSetResponderCapture 事件监听，或其他方案替代。

Demo ​

一个简单的代码示例如下

// App.tsx
import { useState } from 'react';
import { Button, Text, View } from 'react-native';

function App(): JSX.Element {
  let [count, setCount] = useState(0);

  return (
    <View>
        <Text style={{ textAlign: 'center' }}>{count}</Text>
        <Button title="Add Count" onPress={() => {setCount(count+1)}}/>
    </View>
  );
}

export default App;

完整Demo项目源码

使用体验 ​

功能、性能 ​

基本类似小程序开发，差异就是小程序受制于小程序平台规范、小程序技术性能瓶颈。

而 React Native 有更接近原生的功能、性能体验：

• 功能上，RN可以使用自己开发的平台原生模块，实现平台的所有能力。
• 性能上，RN使用 C++ 实现 React 宿主平台的通信；视图拍平算法优化布局渲染性；使用三个线程分配渲染任务：UI线程（操作视图）、JS线程（执行React渲染）、后台线程（专用于布局）。

开发体验 ​

• 完整的 JavaScript 开发体验。
• 随RN版本唯一指定搭建开发环境用的平台SDK版本，减少因版本差异造成的平台SDK报错。提供npx react-native doctor命令帮助排查开发环境问题。
• 社区活跃，有丰富的插件，但插件可能造成平台版本兼容问题。
• 很弱的UI开发能力，视图组件仅支持有限的定制能力，且不支持音、视频媒体组件。
• 默认不支持Web开发，导致上手调试要走搭建开发环境流程，这个流程不仅长，而且要翻墙。

小结：JS开发体验好，UI开发能力弱，扩展性强，适合有配备平台原生开发人员的团队使用。