Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Native Workshop CAS 30.11.2018

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';
import { Text, View, StyleSheet } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone! Save to get a shareable url.
        </Text>
      </View>
    );
  }
}

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

10:23 rotes Quadrat

App.js

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.redSquare} />
        {/* Übung: gelbes oder oranges Quadrat einfügen */}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  redSquare: {
    width: 100,
    height: 100,
    backgroundColor: 'red'
  }
});

10:30: rotes Quadrat und orangener Kreis

App.js

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.redSquare} />
        <View style={styles.orangeCircle} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  redSquare: {
    width: 100,
    height: 100,
    backgroundColor: 'red'
  },
  orangeCircle: {
    width: 100,
    height: 100,
    borderRadius: 100 / 2,
    backgroundColor: 'orange'
  }
});

11:20 Quadrat und Kreis als Komponenten

App.js

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

import Square from './js/components/Square';
import Circle from './js/components/Circle';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Square />
        <Circle />
      </View>
    );
  }
}

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

js/components/Circle.js

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

export default class Circle extends Component {
  render() {
    return <View style={styles.circle} />;
  }
}

const styles = StyleSheet.create({
  circle: {
    width: 100,
    height: 100,
    borderRadius: 100 / 2,
    backgroundColor: 'orange',
  },
});

js/components/Square.js

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

export default class Square extends Component {
  render() {
    return <View style={styles.square} />;
  }
}

const styles = StyleSheet.create({
  square: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.