behrends

Workshop zu React Native am CAS am 30.11.2018

Hier sind die relevanten Änderungen der einzelnen Schritte zu sehen.

10:05: neues Snack-Projekt

App.js

import React from 'react';

behrends

import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import Quote from './js/components/Quote';
import NewQuote from './js/components/NewQuote';

const data = [
  {
    text:
      'Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind.',
    author: 'Albert Einstein'

behrends

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

export default class NewQuote extends Component {
  render() {
    return (
      <Modal
        visible={this.props.visible}
        onRequestClose={this.props.onRequestClose}
      >

behrends

import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import Quote from './js/components/Quote';
import NewQuote from './js/components/NewQuote';

const data = [
  {
    text:
      'Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind.',
    author: 'Albert Einstein'

behrends

import React, { Component } from 'react';
import { Button, Modal, StyleSheet, Text, View } from 'react-native';
import Quote from './js/components/Quote';

const data = [
  {
    text:
      'Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind.',
    author: 'Albert Einstein'
  },

behrends

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

export default class Quote extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>{this.props.text}</Text>
        <Text style={styles.author}>&mdash; {this.props.author}</Text>
      </View>

behrends

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

export default class Quote extends Component {
  render() {
    return <Text>Hallo!!!!!!!!!!!</Text>;
  }
}

behrends

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

const data = [
  {
    text:
      'Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind.',
    author: 'Albert Einstein'
  },
  {

behrends

const data = [
  {
    text:
      'Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind.',
    author: 'Albert Einstein'
  },
  {
    text:
      'Man braucht nichts im Leben zu fürchten, man muss nur alles verstehen.',
    author: 'Marie Curie'