跨端方案对比 Demo

RN

React Native

Meta 开发 · JavaScript + React

import { View, Text, FlatList } from 'react-native';

const users = [
  { id: '1', name: '张三', role: '前端开发工程师', tag: 'React' },
  { id: '2', name: '李四', role: '后端开发工程师', tag: 'Node.js' },
  { id: '3', name: '王五', role: 'UI/UX 设计师', tag: 'Figma' },
];

const renderItem = ({ item }) => (
  <View style={styles.card}>
    <Text style={styles.name}>{item.name}</Text>
    <Text style={styles.role}>{item.role}</Text>
  </View>
);

export default UserList = () => (
  <FlatList
    data={users}
    renderItem={renderItem}
    keyExtractor={item => item.id}
  />
);

FL

Flutter

Google 开发 · Dart

import 'package:flutter/material.dart';

final users = [
  User('张三', '前端开发工程师', 'React'),
  User('李四', '后端开发工程师', 'Node.js'),
  User('王五', 'UI/UX 设计师', 'Figma'),
];

class UserList extends StatelessWidget {
  build(context) {
    return <ListView>
      users.map((u) => <Card>
        <Text>u.name</Text>
        <Text>u.role</Text>
      </Card>)
    </ListView>;
  }
}

UA

uni-app

DCloud 开发 · Vue.js

<!-- user-list.vue -->
<template>
  <view class="user-list">
    <view v-for="u in users"
          :key="u.id"
          class="card">
      <text class="name">{{ u.name }}</text>
      <text class="role">{{ u.role }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() { return {
    users: [
      { name: '张三', role: '前端开发工程师' },
    ]
  }}
}
</script>

TR

Taro

JDT 开发 · React / Vue

import { View, Text } from '@tarojs/components';
import { useState } from 'react';

const users = [
  { name: '张三', role: '前端开发工程师', tag: 'React' },
  { name: '李四', role: '后端开发工程师', tag: 'Node.js' },
  { name: '王五', role: 'UI/UX 设计师', tag: 'Figma' },
];

export default function UserList() {
  return (
    <View>
      {users.map(u => (
        <View className="card">
          <Text>{u.name}</Text>
          <Text>{u.role}</Text>
        </View>
      ))}
    </View>
  );
}

维度	React Native	Flutter	uni-app	Taro
渲染引擎	JSI + Fabric	Skia 自绘	WebView + 小程序	小程序 DSL
性能表现	★★★☆☆	★★★★★	★★★☆☆	★★★☆☆
开发语言	JavaScript / TypeScript	Dart	Vue / JavaScript	React / Vue
学习成本	低（React 用户）	中（需学 Dart）	低（Vue 用户）	低（React/Vue）
包体积（Android APK）	≈ 8-15 MB	≈ 6-12 MB	≈ 3-8 MB	≈ 3-8 MB
原生能力	强（Native Module）	强（FFI + Channel）	中（Plugin 生态）	中（Taro Plugin）
生态成熟度	★★★★☆	★★★★★	★★★★☆	★★★☆☆
HarmonyOS 支持	实验性	实验性	已支持	已支持

跨端方案对比

React Native

Flutter

uni-app

Taro

全方位对比