Capacitor + React — بناء تطبيقات موبايل متعددة المنصات من تطبيقك الويب (2026)

npm create vite@latest my-mobile-app -- --template react-ts
cd my-mobile-app
npm install

npm run dev

npm install @capacitor/core
npm install -D @capacitor/cli

npx cap init

import type { CapacitorConfig } from "@capacitor/cli";
 
const config: CapacitorConfig = {
  appId: "com.example.mymobileapp",
  appName: "My Mobile App",
  webDir: "dist",
  server: {
    androidScheme: "https",
  },
};
 
export default config;

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

npm run build
npx cap sync

npx cap open ios

npx cap run ios

npx cap open android

npx cap run android

npm install @capacitor/camera
npx cap sync

import { Camera, CameraResultType, CameraSource } from "@capacitor/camera";
 
export function useCamera() {
  const takePhoto = async () => {
    const photo = await Camera.getPhoto({
      quality: 90,
      allowEditing: false,
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera,
    });
 
    return photo.webPath;
  };
 
  const pickFromGallery = async () => {
    const photo = await Camera.getPhoto({
      quality: 90,
      allowEditing: false,
      resultType: CameraResultType.Uri,
      source: CameraSource.Photos,
    });
 
    return photo.webPath;
  };
 
  return { takePhoto, pickFromGallery };
}

import { useState } from "react";
import { useCamera } from "../hooks/useCamera";
 
export function PhotoCapture() {
  const { takePhoto, pickFromGallery } = useCamera();
  const [photoUrl, setPhotoUrl] = useState<string | null>(null);
 
  const handleTakePhoto = async () => {
    try {
      const url = await takePhoto();
      if (url) setPhotoUrl(url);
    } catch (error) {
      console.error("خطأ في الكاميرا:", error);
    }
  };
 
  const handlePickPhoto = async () => {
    try {
      const url = await pickFromGallery();
      if (url) setPhotoUrl(url);
    } catch (error) {
      console.error("خطأ في المعرض:", error);
    }
  };
 
  return (
    <div className="photo-capture">
      <h2>التقاط صورة</h2>
      <div className="buttons">
        <button onClick={handleTakePhoto}>التقط صورة</button>
        <button onClick={handlePickPhoto}>اختر من المعرض</button>
      </div>
      {photoUrl && (
        <div className="preview">
          <img src={photoUrl} alt="صورة ملتقطة" />
        </div>
      )}
    </div>
  );
}

<key>NSCameraUsageDescription</key>
<string>يحتاج هذا التطبيق إلى الوصول للكاميرا لالتقاط الصور</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>يحتاج هذا التطبيق إلى الوصول لمكتبة الصور لاختيار الصور</string>

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

npm run build
npx cap sync
npx cap run ios

npm install @capacitor/preferences
npx cap sync

import { Preferences } from "@capacitor/preferences";
 
export const storage = {
  async get<T>(key: string): Promise<T | null> {
    const { value } = await Preferences.get({ key });
    if (!value) return null;
    return JSON.parse(value) as T;
  },
 
  async set(key: string, value: unknown): Promise<void> {
    await Preferences.set({
      key,
      value: JSON.stringify(value),
    });
  },
 
  async remove(key: string): Promise<void> {
    await Preferences.remove({ key });
  },
 
  async clear(): Promise<void> {
    await Preferences.clear();
  },
};

import { storage } from "../lib/storage";
 
// حفظ رابط صورة
await storage.set("lastPhoto", photoUrl);
 
// استرجاعها لاحقاً
const lastPhoto = await storage.get<string>("lastPhoto");

npm install @capacitor/haptics
npx cap sync

import { Haptics, ImpactStyle } from "@capacitor/haptics";
import { Capacitor } from "@capacitor/core";
 
export const haptics = {
  async impact(style: ImpactStyle = ImpactStyle.Medium) {
    if (Capacitor.isNativePlatform()) {
      await Haptics.impact({ style });
    }
  },
 
  async notification(type: "success" | "warning" | "error") {
    if (Capacitor.isNativePlatform()) {
      await Haptics.notification({ type: type as any });
    }
  },
 
  async vibrate() {
    if (Capacitor.isNativePlatform()) {
      await Haptics.vibrate();
    }
  },
};

import { haptics } from "../lib/haptics";
import { ImpactStyle } from "@capacitor/haptics";
 
const handleTakePhoto = async () => {
  await haptics.impact(ImpactStyle.Light);
  const url = await takePhoto();
  if (url) setPhotoUrl(url);
};

import { Capacitor } from "@capacitor/core";
 
export function getPlatformInfo() {
  return {
    platform: Capacitor.getPlatform(), // 'web' | 'ios' | 'android'
    isNative: Capacitor.isNativePlatform(),
    isIOS: Capacitor.getPlatform() === "ios",
    isAndroid: Capacitor.getPlatform() === "android",
    isWeb: Capacitor.getPlatform() === "web",
  };
}

import { getPlatformInfo } from "../lib/platform";
 
function AppHeader() {
  const { isIOS } = getPlatformInfo();
 
  return (
    <header
      style={{
        paddingTop: isIOS ? "env(safe-area-inset-top)" : "0",
      }}
    >
      <h1>تطبيقي</h1>
    </header>
  );
}

:root {
  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
  --sar: env(safe-area-inset-right);
}
 
body {
  padding-top: var(--sat);
  padding-bottom: var(--sab);
  padding-left: var(--sal);
  padding-right: var(--sar);
}

const config: CapacitorConfig = {
  // ...
  ios: {
    contentInset: "automatic",
  },
};

npm install @capacitor/push-notifications
npx cap sync

import { PushNotifications } from "@capacitor/push-notifications";
import { Capacitor } from "@capacitor/core";
 
export async function initPushNotifications() {
  if (!Capacitor.isNativePlatform()) {
    console.log("الإشعارات الفورية غير متاحة على الويب");
    return;
  }
 
  // طلب الإذن
  const permStatus = await PushNotifications.requestPermissions();
  if (permStatus.receive !== "granted") {
    console.warn("لم يتم منح إذن الإشعارات");
    return;
  }
 
  // التسجيل لدى Apple/Google
  await PushNotifications.register();
 
  // الاستماع لرمز التسجيل
  PushNotifications.addListener("registration", (token) => {
    console.log("رمز الإشعارات:", token.value);
    // أرسل هذا الرمز إلى الخادم الخلفي
  });
 
  // الاستماع للإشعارات الواردة
  PushNotifications.addListener(
    "pushNotificationReceived",
    (notification) => {
      console.log("إشعار مستلم:", notification);
    }
  );
 
  // الاستماع للنقر على الإشعارات
  PushNotifications.addListener(
    "pushNotificationActionPerformed",
    (action) => {
      console.log("إجراء الإشعار:", action);
      // الانتقال إلى الشاشة المناسبة
    }
  );
}

import { useEffect } from "react";
import { initPushNotifications } from "./lib/notifications";
 
function App() {
  useEffect(() => {
    initPushNotifications();
  }, []);
 
  return <>{/* تطبيقك */}</>;
}

npm install -D @capacitor/assets

npx capacitor-assets generate

npm install @capacitor/splash-screen
npx cap sync

const config: CapacitorConfig = {
  // ...
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      backgroundColor: "#1a1a2e",
      showSpinner: false,
      androidScaleType: "CENTER_CROP",
      splashFullScreen: true,
      splashImmersive: true,
    },
  },
};

import { SplashScreen } from "@capacitor/splash-screen";
 
// عندما يكون تطبيقك جاهزاً
await SplashScreen.hide();

import type { CapacitorConfig } from "@capacitor/cli";
 
const config: CapacitorConfig = {
  appId: "com.example.mymobileapp",
  appName: "My Mobile App",
  webDir: "dist",
  server: {
    // تفعيل إعادة التحميل المباشر في التطوير
    url: "http://عنوان_IP_المحلي:5173",
    cleartext: true,
  },
};
 
export default config;

# macOS
ipconfig getifaddr en0

npm run dev
npx cap run ios --livereload --external

cd android
./gradlew bundleRelease

jarsigner -verbose -sigalg SHA256withRSA -digestalg SHA-256 \
  -keystore my-release-key.jks \
  app-release.aab alias_name

import { useEffect, useState } from "react";
import { SplashScreen } from "@capacitor/splash-screen";
import { PhotoCapture } from "./components/PhotoCapture";
import { storage } from "./lib/storage";
import { initPushNotifications } from "./lib/notifications";
import { getPlatformInfo } from "./lib/platform";
import "./App.css";
 
function App() {
  const [platform, setPlatform] = useState("");
  const [savedPhotos, setSavedPhotos] = useState<string[]>([]);
 
  useEffect(() => {
    const init = async () => {
      const info = getPlatformInfo();
      setPlatform(info.platform);
 
      // تحميل الصور المحفوظة
      const photos = await storage.get<string[]>("photos");
      if (photos) setSavedPhotos(photos);
 
      // تهيئة الإشعارات الفورية
      await initPushNotifications();
 
      // إخفاء شاشة البداية
      await SplashScreen.hide();
    };
 
    init();
  }, []);
 
  return (
    <div className="app">
      <header className="app-header">
        <h1>تطبيقي المحمول</h1>
        <span className="platform-badge">{platform}</span>
      </header>
 
      <main>
        <PhotoCapture />
 
        {savedPhotos.length > 0 && (
          <section className="gallery">
            <h2>الصور المحفوظة</h2>
            <div className="photo-grid">
              {savedPhotos.map((url, i) => (
                <img key={i} src={url} alt={`صورة ${i + 1}`} />
              ))}
            </div>
          </section>
        )}
      </main>
    </div>
  );
}
 
export default App;