init

App.js

@@ -1,15 +1,40 @@
+import React, { Component } from 'react'; // Bei React bzw. Nativ immer importieren!
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { Button, StyleSheet, Text, View } from 'react-native';
 
-export default function App() {
+import Quote from './js/components/Quote';
+
+const data = [
+  { text: "Zitat1", author: "Author 1" },
+  { text: "Zitat2", author: "Author 2" },
+  { text: "Zitat3", author: "Author 3" },
+  { text: "Zitat4", author: "Author 4" },
+  { text: "Zitat5", author: "Author 5" },
+];
+export default class App extends Component {
+  state = { index: 0 }; //initialer Zustand
+
+  // Darstellung der Komponente im UI
+  // Render wird automatisch ausgeführt
+  // a) Komponente erscheint im Ui (initialer Zustand)
+  // b) Zustand ändert sich (state) => this.setstate(...)
+  render() {
+    let index = this.state.index;
+    const quote = data[index];
+    let nextIndex = index + 1;
+    if (nextIndex === data.length) nextIndex = 0;
     return (
+      //JSX
       <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
+        <Quote text={quote.text} author={quote.author} />
+        <Button title="Nächstes Zitat" onPress={() => this.setState({ index: nextIndex })} />
         <StatusBar style="auto" />
       </View>
     );
+  }
 }
 
+//Aussehen und Layout
 const styles = StyleSheet.create({
   container: {
     flex: 1,

App_plane.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react'; // Bei React bzw. Nativ immer importieren!
+import { StatusBar } from 'expo-status-bar';
+import { Button, StyleSheet, Text, View } from 'react-native';
+
+const data = [
+    { text: "Zitat1", author: "Author 1" },
+    { text: "Zitat2", author: "Author 2" },
+    { text: "Zitat3", author: "Author 3" },
+    { text: "Zitat4", author: "Author 4" },
+    { text: "Zitat5", author: "Author 5" },
+];
+export default class App extends Component {
+    state = { index: 0 }; //initialer Zustand
+
+    // Darstellung der Komponente im UI
+    // Render wird automatisch ausgeführt
+    // a) Komponente erscheint im Ui (initialer Zustand)
+    // b) Zustand ändert sich (state) => this.setstate(...)
+    render() {
+        let index = this.state.index;
+        const quote = data[index];
+        let nextIndex = index + 1;
+        if (nextIndex === data.length) nextIndex = 0;
+        return (
+            //JSX
+            <View style={styles.container}>
+                <Text>{quote.text}</Text>
+                <Text>-- {quote.author}</Text>
+                <Button title="Nächstes Zitat" onPress={() => this.setState({ index: nextIndex })} />
+                <StatusBar style="auto" />
+            </View>
+        );
+    }
+}
+
+//Aussehen und Layout
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

js/components/Quote.js

@@ -0,0 +1,12 @@
+import React, { Component, Fragment } from 'react';
+import { Text } from 'react-native'
+
+export default class Quote extends Component {
+    render() {
+        return (
+            <Fragment>
+                <Text>{this.props.text}</Text>
+                <Text>{this.props.author}</Text>
+            </Fragment>);
+    }
+}

package.json

@@ -3,11 +3,12 @@
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "expo start",
+    "start": "set NODE_OPTIONS=--openssl-legacy-provider && expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "eject": "expo eject"
+    "eject": "expo eject",
+    "build": "export NODE_OPTIONS=--openssl-legacy-provider; gatsby build"
   },
   "dependencies": {
     "expo": "~44.0.0",