React Native / Flexbox 레이아웃 기본 사용법 (flex, flexDirection, justifyContent, alignItems)
flex : 전체 비율 ( 1은 100%를 의미) export default function Sandbox() { return( One Two Three Four ) } const styles = StyleSheet.create({ container: { flex :1, paddingTop: 40, backgroundColor :'#ddd' }, boxOne:{ backgroundColor:'violet', padding:10, }, boxTwo:{ backgroundColor:'gold', padding:10, }, boxThree:{ backgroundColor:'coral', padding:10, }, boxFour:{ backgroundColor:'skyblue', padding:10, } });..
React Native / alert창 띄우기, Alert.alert()
먼저 import Alert 추가해준다. import { StyleSheet, Text, View, FlatList, Alert } from 'react-native'; 전체 소스는 다음과 같다. const submitHandler = (text) => { if(text.length > 3){ setTodos((prevTodos) => { return [ { text: text, key: Math.random().toString() }, ...prevTodos, ]; }); }else { Alert.alert('OOPS', 'Todos must be over 3 chars long', [ {text: 'Understood', onPress: () => console.log('alert closed')},..
React Native / Touchable Components
TouchableOpacity : React Native 에서 버튼 기능 App.js import { StatusBar } from 'expo-status-bar'; import React, {useState} from 'react'; import { StyleSheet, Text, View, FlatList, TouchableOpacity } from 'react-native'; export default function App() { const [people, setPeople] = useState([ {name: 'shaun', id: '1'}, {name: 'yoshi', id: '2'}, {name: 'mario', id: '3'}, {name: 'luigi', id: '4'}, {name: '..
