React Native workshop 2 snippet

week_2_demo_3.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <View style={{flex: 1, flexDirection: 'column'}}>
        <View style={{flex: 1,
                      justifyContent: 'center',
                      alignItems: 'center',
                      backgroundColor: '#eeeeee'
                    }}>
          <Text>第一層</Text>
        </View>
        <View style={{flex: 2,
                      justifyContent: 'center',
                      alignItems: 'center',
                      backgroundColor: '#dddddd'
                    }}>
          <Text>第二層</Text>
        </View>
        <View style={{flex: 3,
                      justifyContent: 'center',
                      alignItems: 'center',
                      backgroundColor: '#cccccc'
                    }}>
          <Text>第三層</Text>
        </View>
      </View>
    );
  }
}