리액트로 웹을 공부하다가 CSS에 막혀서 ㅠㅠ 상대적으로 쉬운? React Navtive를 먼저 하기로 결정했다.
State, Props는 동일하나 Style는 생각보다 간단했다 .
https://facebook.github.io/react-native/docs/style
Layout 파트가 많지 않아서 .. 해보세요
App.js
1 2 3 4 5 6 7 8 9 10 11 12 | 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; | cs |
InputText.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 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" } }); | cs |