React Native App Vorlage für Android und iOS

React Native ist in der Lage nativen Swift und Java Code zu erzeugen und ist damit ein hybrid Framework, dass mit überzeugender Performance besticht. Ein Nachteil dieses Ansatzes ist, dass für beide Betriebssysteme unterschiedliche Index-Dateien zur Verfügung stehen. Hat man eine App für iOS entwickelt und möchte diese danach auf Android Telefonen lauffähig bekommen, muss man den Code von index.ios.js in index.android.js kopieren. Je nach Komplexität der App kann es sogar sein, dass zwischen den beiden Dateien leichte Unterschiede implementiert werden müssen. Den Knopf "Für beide Exportieren" gibt es nicht. Nichtsdestotrotz gibt es gerade für simplere Apps auch oft gar keinen Unterschied zwischen dem Code für Android und iOS. Damit man in so einem Fall nicht denselben Code doppelt pflegen muss, ist hier ein Vorschlag um sein React Native Projekt sop zu strukturieren, dass es nur eine Code-Basis gibt.

Der Vorschlag stammt aus dem hervorragenden Tutorial von Stephen Grider auf udemy.com (https://www.udemy.com/reactnative). Da der Autor des Tutorials auf Version 0.24.0 entwickelt und React Native seitdem einige der dort verwendeten Methoden als Deprecated betrachtet, hab ich den Code etwas modernisiert. Folgt man dem Tutorial muss man alle Apps mit "react-native init myproject --version 0.24.0" initialisieren.

Zuerst wird ein Projekt-unterordner "src" erstellt und darin eine Datei "main.js". Die Datei /src/main.js hat folgenden Inhalt:

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

module.exports = React.createClass({
	render: function() {
		return (
			
					I am on both iOS and Android!
				
		)
	}
});

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

Danach bekommen die Dateien index.ios.js und index.android.js den identischen folgenden Inhalt:

import React, { Component } from 'react';
import {
  AppRegistry
} from 'react-native';

const Main = require('./src/main');

AppRegistry.registerComponent('authentication', () => Main);

Im Folgenden wird dann nur noch in der main.js gearbeitet und die Änderungen werden für beide Betriebssysteme gleichermaßen angewendet. Jetzt muss nur noch darauf geachtet werden, dass auch ausschließlich Plattformunabhängige Methoden angewendet werden.

Kommentare