React Native-Leitfaden

Erstellen Sie eine plattformübergreifende App mit dem Widget über react-native-webview. Dies ermöglicht eine gemeinsame Codebasis für iOS und Android.

✓

Cross-Plattform

Eine Komponente für iOS und Android.

✓

Autom. Höhe

Passt sich dem Inhalt an (benötigt extra Prop).

Komponenten Code

Zurück zum Konfigurator

import React from 'react';
import { WebView } from 'react-native-webview';

export function CalendarWeekWidget() {
  const html = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        body { margin: 0; padding: 16px; }
      </style>
    </head>
    <body>
      <div class=\"tcw-embed\" data-design=\"dashboard\" data-variant=\"weekdays\"></div>
      <script src="https://thecalendarweek.com/embed.js" async></script>
    </body>
    </html>
  `;

  return (
    <WebView
      source={{ html }}
      style={{ flex: 1 }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
}

Benötigte Abhängigkeit: Sie müssen react-native-webview installieren, um diese Komponente zu nutzen.