[todo_app_3] ui- 기본, 입력칸

기본적인 ui 작업

import React from 'react';

import { StyleSheet, Text, View, StatusBar, TextInput, Dimensions, Platform } from 'react-native';

const { height, width } = Dimensions.get("window"); {/*윈도우 크기 알아내서 저장*/}

export default class App extends React.Component {

render() {

return (

<View style={styles.container}>

<StatusBar barStyle="light-content" /> {/*상단의 status bar 변경*/}

<Text style={styles.title}>Cute To Do</Text>

<View style={styles.card}>

<TextInput style={styles.input} placeholder={"New To Do"}></TextInput>

</View>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#F23657',

alignItems: 'center',

},

title: {

color: "white",

fontSize: 30,

marginTop: 50,

fontWeight: "200",

marginBottom: 30

},

card: {

backgroundColor: "white",

flex: 1,

width: width - 25,

borderTopLeftRadius: 10,

borderTopRightRadius: 10,

...Platform.select({

ios: {

shadowColor:"rgb(50, 50, 50)",

shadowOpacity: 0.5,

shadowRadius: 5,

shadowOffset: {

height: -1,

width: 0

}

},

android:{

elevation: 3

}

})

}

});

...Platform.select({

ios: {

shadowColor:"rgb(50, 50, 50)",

shadowOpacity: 0.5,

shadowRadius: 5,

shadowOffset: {

height: -1,

width: 0

}

},

android:{

elevation: 3

}

그림자 속성은 안드로이드와 ios 각각 설정해줘야한다.

textInput 수정 => 입력 인풋과 표시되는 부분 만들기

export default class App extends React.Component {

state = { {/*state 생성*/}

newToDo: ""

}

render() {

const { newToDo } =this.state; {/*value 줘야하니까*/}

return (

<View style={styles.container}>

<StatusBar barStyle="light-content" />

<Text style={styles.title}>Cute To Do</Text>

<View style={styles.card}>

<TextInput

style={styles.input}

placeholder={"New To Do"}

value={newToDo}

onChangeText={this._controlNewToDo} {/*함수 호출*/}

placeholderTextColor={"#999"}

returnKeyType={"done"} {/*키보드의 리턴키를 done으로 변경*/}

autoCorrect={false}/>{/*자동수정 안해요*/}

</View>

</View>

);

}

_controlNewToDo = text => { {/*이벤트에서 텍스트를 가져올 예정*/}

this.setState({

newToDo: text

})

}

}

input: {

padding: 20,

borderBottomColor: "#bbb",

borderBottomWidth: StyleSheet.hairlineWidth,

fontSize: 25

}

리턴키 변경?

returnKeyType={"done"}

시뮬레이터에서 하드웨어->키보드->토글 소프트웨어 키보드로 확인할 수 있다