react 如何编写app

使用 React 编写移动应用的方法

React 提供了多种方式用于开发移动应用，以下是常见的方法：

React Native

React Native 是 Facebook 推出的跨平台移动应用开发框架，允许使用 React 语法开发原生应用。

安装 React Native CLI：

npx react-native init MyApp

基本组件示例：

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

export default App;

React + Capacitor/Cordova

将 React Web 应用打包为移动应用的解决方案：

安装 Capacitor：

npm install @capacitor/core @capacitor/cli
npx cap init

添加平台：

npx cap add android
npx cap add ios

Progressive Web Apps (PWA)

使用 React 创建渐进式 Web 应用：

创建 React PWA 项目：

npx create-react-app my-pwa --template cra-template-pwa

注册 Service Worker：

// src/index.js
serviceWorkerRegistration.register();

跨平台框架比较

• React Native：高性能，接近原生体验，需要平台特定代码
• Capacitor/Cordova：WebView 包装，适合已有 Web 应用
• PWA：无需安装，但功能受浏览器限制

开发建议

1. 对于全新移动项目，React Native 是最佳选择
2. 已有 React Web 应用想转为移动应用，考虑 Capacitor
3. 需要快速部署且不依赖原生功能，PWA 是可行方案

调试工具：

• React Native Debugger
• Chrome DevTools for PWA
• Android Studio/iOS Simulator