1. React Native [InputText]

리액트로 웹을 공부하다가 CSS에 막혀서 ㅠㅠ 상대적으로 쉬운? React Navtive를 먼저 하기로 결정했다.

State, Props는 동일하나 Style는 생각보다 간단했다 . 

https://facebook.github.io/react-native/docs/style 

Layout 파트가 많지 않아서 .. 해보세요 

App.js

import React from "react";
import List from "./List";
import Input from "./TextInput";
//import { StyleSheet, Text, View } from "react-native";
 
const App = () => {
  //return <List />;
  return <Input />;
};
 
export default App;
 

InputText.js

import React, { Component } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  TextInput,
  StyleSheet
} from "react-native";
 
class Inputs extends Component {
  state = {
    email: "",
    password: ""
  };
 
  handleEmail = text => {
    this.setState({ email: text });
  };
 
  handlePassword = text => {
    this.setState({ password: text });
  };
 
  login = (email, pass) => {
    alert("email :" + email + "password :" + pass);
  };
 
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          underlineColorAndroid="transparent"
          placeholder="Email"
          placeholderTextColor="#9a73ef"
          autoCapitalize="none"
          onChangeText={this.handleEmail}
        />
        <TextInput
          style={styles.input}
          underlineColorAndroid="transparent"
          placeholder="Password"
          placeholderTextColor="#9a73ef"
          autoCapitalize="none"
          onChangeText={this.handlePassword}
        />
        <TouchableOpacity
          style={styles.submitButton}
          onPress={() => this.login(this.state.email, this.state.password)}
        >
          <Text style={styles.submitButtonText}>Submit</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
 
export default Inputs;
 
const styles = StyleSheet.create({
  container: {
    paddingTop: 23
  },
  input: {
    margin: 15,
    height: 40,
    borderColor: "#7a42f4",
    borderWidth: 1
  },
  submitButton: {
    backgroundColor: "#7a42f4",
    padding: 10,
    margin: 15,
    height: 40
  },
  submitButtonText: {
    color: "white"
  }
});