week_6_demo1

Index.js

import React, {Component} from 'react';
import {
  View,
  Text,
  ImageBackground,
  Dimensions,
  StatusBar,
  TextInput,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Keyboard,
  Alert,
} from 'react-native';

const {width, height} = Dimensions.get('window');


export default class Index extends Component {

  constructor(props) {
    super(props);
    this.state = {
    }
  }

  render() {
    return (
      <ImageBackground
        style={{flex: 1, backgroundColor: 'transparent'}}
        imageStyle={{
          width: undefined,
          height: undefined,
        }}
        source={{uri:                  'https://upload.wikimedia.org/wikipedia/commons/2/23/Lake_mapourika_NZ.jpeg'}}>
        <StatusBar
          barStyle="light-content"
        />
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <View style={{flex: 1}}>
            <View style={{flex: 4, alignItems: 'center', justifyContent: 'center'}}>
              <Text style={{color: 'white', fontSize: 28, fontWeight: '600'}}>我的Awesome App</Text>
            </View>
            {/* 輸入框 */}
            <View style={{flex: 3, alignItems: 'center', justifyContent: 'center'}}>
              <View style={{width, alignItems: 'center'}}>
                <TextInput
                  style={{width: '80%', height: 36, backgroundColor: 'white', padding: 8, borderWidth: 1, borderColor: '#00000020'}}
                  placeholder="輸入帳號..."
                  keyboardType="phone-pad"
                />
              </View>
              <View style={{width, alignItems: 'center', marginVertical: 10}}>
                <TextInput
                  style={{width: '80%', height: 36, backgroundColor: 'white', padding: 8, borderWidth: 1, borderColor: '#00000020'}}
                  placeholder="輸入密碼..."
                  secureTextEntry={true}
                />
              </View>
              <View style={{width, alignItems: 'center'}}>
                <TouchableOpacity style={{width: '80%'}} onPress={() => Alert.alert('好棒', 'Awesome!!!!!')}>
                  <View style={{height: 32, backgroundColor: 'orange', alignItems: 'center', justifyContent: 'center'}}>
                    <Text style={{color: 'white', fontSize: 20, fontWeight: '600'}}>登入</Text>
                  </View>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </TouchableWithoutFeedback>
      </ImageBackground>
    );
  }
}