Vergleich der plattformspezifischen Benutzeroberflächen in React Native und Flutter

React Native und Flutter sind zwei beliebte plattformübergreifende Frameworks für die Entwicklung mobiler Apps, mit denen Entwickler Apps für iOS und Android mit einer einzigen Codebasis erstellen können. Die Herausforderung für diese plattformübergreifenden Lösungen besteht darin, eine Benutzeroberfläche zu liefern, die nativ aussieht und sich auch so anfühlt, was für die Schaffung eines nahtlosen Benutzererlebnisses wichtig ist. In diesem Blog werde ich darauf eingehen, wie React Native und Flutter dies gelöst haben und was meiner Meinung nach das beste Ergebnis liefert.

React Native

React Native erstellt eine plattformspezifische Benutzeroberfläche, indem es auf plattformspezifische UI-Komponenten zurückgreift. Wenn Sie ein UI-Element in React Native erstellen, ist die verwendete UI-Komponente spezifisch für die Plattform, auf der die App ausgeführt wird (z.B. Text auf iOS, TextView auf Android). React Native verwendet automatisch die UI-spezifische Komponente für jede Plattform, so dass die App sowohl auf iOS als auch auf Android wie eine native App aussieht und sich anfühlt.

Das ist vorteilhaft, denn zukünftige Änderungen an der nativen Benutzeroberfläche werden automatisch in React Native übersetzt. Auch die Unterstützung der Barrierefreiheit wird nativ unterstützt, wofür ich das folgende Beispiel zeigen werde.

Beispiel

React Native bietet die Komponenten Switch, die sich in die native Komponente UISwitch für iOS und Switch für Android umwandeln lassen. Hier ist ein Beispiel dafür, wie Sie diese Komponenten in React Native verwenden können.

function App(): JSX.Element {
  const [switchValue, setSwitchValue] = useState(false);
  const handleSwitch = () => setSwitchValue(previousState => !previousState);

  const switchState = switchValue ? 'ON' : 'OFF';
  const switchText =
    Platform.OS === 'ios'
      ? iOS Switch (${switchState})
      : Android Switch (${switchState});

  return (
    <ScrollView
      contentInsetAdjustmentBehavior="automatic"
      style={styles.scrollViewStyle}
      contentContainerStyle={styles.scrollViewContent}>
      <View style={styles.container}>
        <View style={styles.switchContainer}>
          <Text>{switchText}</Text>
          <Switch onValueChange={handleSwitch} value={switchValue} />
        </View>
      </View>
    </ScrollView>
  );
}

Dieser Code führt im Simulator zu folgendem Ergebnis. Im Simulator habe ich die Einstellung für die Barrierefreiheit aktiviert, um Ein/Aus-Beschriftungen anzuzeigen. Wie Sie sehen können, verwendet React Native die native UI-Komponente, so dass diese Beschriftungen über die Einstellungen für die Barrierefreiheit angezeigt werden.

Flattern

Flutter verfolgt einen anderen Ansatz für plattformspezifische Benutzeroberflächen. Anstatt sich auf plattformspezifische Komponenten zu verlassen, bietet Flutter eine eigene Reihe von Widgets, die so konzipiert sind, dass sie wie native UI-Komponenten sowohl auf iOS als auch auf Android aussehen und sich auch so anfühlen. Diese Widgets sind im Flutter-Framework selbst implementiert und werden direkt von der Flutter-Engine gerendert, so dass mit Flutter erstellte Apps auf allen Plattformen ein einheitliches Erscheinungsbild aufweisen.

Beispiel

Flutter bietet eine eigene Reihe von Widgets, mit denen Sie plattformspezifische UI-Elemente erstellen können. Hier ein Beispiel, wie Sie PlatformSwitch verwenden können, um einen Schalter zu zeigen, der wie eine native Schaltfläche auf iOS bzw. Android aussieht und sich auch so anfühlt:

class _MyHomePageState extends State<MyHomePage> {
  bool switchValue = false;

  void handleSwitch(bool value) {
    setState(() {
      switchValue = value;
    });
  }

  String getSwitchState() {
    return switchValue ? 'ON' : 'OFF';
  }

  String getSwitchText() {
    return Platform.isIOS
        ? 'iOS Switch (${getSwitchState()})'
        : 'Android Switch (${getSwitchState()})';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(20),
        color: Color(0xFF7AA4FF),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: double.infinity,
              height: 50,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20), // Added horizontal padding of 20
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      getSwitchText(),
                    ),
                    PlatformSwitch(
                      value: switchValue,
                      onChanged: handleSwitch,
                    ),
                  ],
                ),
              ),
            ),
          ]
        ),
      ),
    );
  }
}

Dieser Code führt im Simulator zu folgendem Ergebnis. Im Simulator habe ich die Einstellung für die Barrierefreiheit aktiviert, um die Beschriftungen Ein/Aus anzuzeigen. Wie Sie sehen, verwendet Flutter nicht die systemeigene UI-Komponente, was dazu führt, dass diese Beschriftungen nicht über die Einstellungen für die Barrierefreiheit angezeigt werden.

Obwohl es sich um einen bekannten Fehler (aus dem Jahr 2016) handelt und ein PR fertig ist, habe ich dies als Beispiel verwendet, um den Unterschied zwischen diesen Plattformen zu verdeutlichen. Für React Native ist dies kein Problem, denn es ist sofort verfügbar, weil es die native UI-Komponente verwendet. Flutter ahmt die UI-Komponente nach, weshalb diese Probleme bestehen.

Der Grund dafür, dass Flutter nicht die gleiche Lösung wie React Native verwendet, ist, dass sie glauben, dass es eine zusätzliche Abstraktion zwischen der Benutzeroberfläche und der Anwendungslogik hinzufügt. Ich nehme an, dass dies einer der Gründe ist, warum Flutter im Vergleich schneller ist.

Dies ist zwar ein Beispiel für Barrierefreiheit, aber das Gleiche gilt, wenn sich die Komponenten der nativen Plattform ändern und aktualisiert werden müssen, um auf dem neuesten Stand zu bleiben. Im Moment erhält React Native diese Änderungen automatisch, während Flutter eine weitere PR benötigt, um den Änderungen der Plattform zu entsprechen.

Schlusswort

Flutter ist zwar eine ausgereifte Plattform, mit der Sie Ihre plattformübergreifenden Anwendungen erstellen können, aber es ist gut zu wissen, worin die Unterschiede zwischen den anderen plattformübergreifenden Lösungen wie React Native bestehen.

Meiner Meinung nach verschafft Ihnen die Verwendung nativer UI-Elemente bereits einen Vorsprung bei der Entwicklung von Apps mit einem guten Benutzererlebnis. Die Benutzer wissen dann besser, was sie erwartet, und es entsteht ein vertrautes Gefühl. Die Lernkurve, um sich an Ihre App zu gewöhnen, ist niedriger, so dass die Benutzer weniger Zeit brauchen, um die Funktionen der App zu verstehen. Letztendlich ist die Wahrscheinlichkeit höher, dass die Benutzer Ihre App häufiger verwenden.

Zusammenfassend lässt sich sagen, dass React Native auf native UI-Komponenten zurückgreift, um eine plattformspezifische Benutzeroberfläche zu schaffen, die ein nahtloses und vertrautes Benutzererlebnis bietet. Flutter hingegen verwendet eine eigene Reihe von Widgets, um die nativen UI-Komponenten zu imitieren. Das bietet Konsistenz, stößt aber möglicherweise an Grenzen. Die Wahl zwischen den beiden Frameworks hängt von den Projektanforderungen ab, aber wenn Sie mich fragen würden, würde ich die Funktionalität über ein bisschen Geschwindigkeit stellen, so dass React Native meine bevorzugte Lösung wäre.