react-native
-
[todo_app_6] isEditing?프로젝트/[react]todo_app 2018. 5. 15. 13:42
수정, 삭제 스타일 수정중인지 아닌지 여부를 판단해서 스타일을 표시할거라 isEditing이 필요함 render(){ const { isEditing } = this.state; 수정, 삭제를 할 수 있는 연필, 엑스표 모양 이모지를 넣자column안에서 관리할거임 {/* column*/} todo ) {isEditing ? {/*수정할 때 모드*/} ✅ : {/*수정하지 않을 때 때 모드*/} ✏️ ❌ } 스타일을 준다const styles = StyleSheet.create({ container: { width: width - 50, borderBottomColor: "#bbb", borderBottomWidth: StyleSheet.hairlineWidth, alignItems: "center", ..
-
[todo_app_5] ui 마무리프로젝트/[react]todo_app 2018. 5. 15. 13:42
isEditing? ToDo앱은 두 개의 states가 있다수정할 때수정하지 않을 때 두 개의 state를 만들고 그 사이를 왔다갔다 해야함 state = { isEditing: false }기본값은 false (수정하기를 누르면 true가 되도록) 다시 ui작업... 할일 목록을 담을 컨테이너 스타일터치 가능한 동그라미 import React, {Component} from 'react';import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'react-native'; const { width, height } = Dimensions.get("window"); export default class ToDo extends Compone..
-
[todo_app_4] 스크롤이 가능한 리스트프로젝트/[react]todo_app 2018. 5. 15. 13:41
ToDo.js 리스트를 만들어서, 스크롤 할 수 있게 코드를 작성하려고 한다.ToDo.js 파일로 빼서 작업import React, {Component} from 'react';import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'; export default class ToDo extends Component{ //stateful component, 수정되야하니까 render(){ return ( ToDo ) }} const styles = StyleSheet.create({ }) App.js 에 ToDo 컴포넌트 import 하기 import ToDo from './ToDo'; 스크롤이 가능하게 되었다. 가운데 정렬 ! toDo..
-
[weather_app_1] react-native 와 expo프로젝트/[react]weather_app 2018. 4. 14. 19:01
날씨를 불러와 표시해주는 어플리케이션 제작 제목이 멋지지만 f word는 빼고 작업해야겠다..ㅎㅎㅎ react native, expo, node.js, npm 이 사용된다. react native네이티브 웹 어플리케이션을 빌드하게 도와주는 ui라이브러리jsx/javascript로 작성하고 컴파일링 할때 각각 ios(objective-c)/android(java) 네이티브 코드로 실행됨페이스북의 기술에 의하여 js-objective-c 의 브릿지 혹은 js-java가 연결됨 장점1. 자바스크립트를 활용할 수 있다는것2. 커뮤니티가 크다는것3. 많은 회사가 리액트 네이티브를 쓴다는것 (ex. 인스타그램,에어비앤비,페이스북,디스코드) expohttps://expo.io/tools리액트 네이티브로 앱을 만드는 ..