본문 바로가기

분류 전체보기

 (95)
React Native / navigation v5 2(페이지이동) 출발페이지와 도착페이지를 설정 후, 각 페이지에 navigation 변수를 사용해 이동한다. home.js /출발페이지 import React from 'react'; import { View, Text, Button} from 'react-native'; import { globalStyles } from '../styles/global' export default function Home({navigation}) { const pressHandler = () => { // 페이지 이동. navigate = push // 변수는 routes 파일 screens 내 키값을 사용한다 navigation.navigate('ReviewDetail'); // navigation.push('ReviewDetail..
React Native / navigation v5 1 https://reactnavigation.org/docs/getting-started 1. Install npm install @react-navigation/native expo install react-native-gesture-handler react-native-reanimated # expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view react-native-gesture-handler : 뷰를 왼쪽, 오른쪽으로 스와이프 하면 새로운 뷰가 나타나도록 설정 가능 npm inst..
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default a.. 내가 만난 에러 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Attempted import error: 'AppLoading' is not exported from 'expo'. 이때 사용했던 코드는 import { AppLoading } from 'expo'; 강의듣는데..
React Native / Custom Fonts 적용하기 (using-custom-fonts) 1. Google Font 다운로드 https://fonts.google.com/ 구글 사이트에서 원하는 폰트 다운로드 Download Family 클릭 2. assets 폴더에 fonts 폴더 만든 후 원하는 폰트 넣기 3. Import font와 expo-app-loading import import * as Font from 'expo-font'; import AppLoading from 'expo-app-loading'; import를 통해 먼저 앱을 가져온다. 4. Usage App.js import React, {useState} from 'react'; import { StyleSheet } from 'react-native'; import * as Font from 'expo-font'; ..
React Native / expo vector icon 1. 먼저 import 하기 import { MaterialIcons } from '@expo/vector-icons'; 2. MaterialIcons 컴포넌트 추가 후, size, color 지정 가능 3. 응용 todoItem.js import React from 'react'; import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; import { MaterialIcons } from '@expo/vector-icons'; export default function TodoItem({ item, pressHandler }){ return( pressHandler(item.key)}> {item.text} ) } const s..
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 / Dismissing the Keyboard, 빈공간 클릭 시 키보드 내리기 1. import에 TouchableWithoutFeedback, Keyboard 를 추가해준다. import { StyleSheet, Text, View, FlatList, Alert, TouchableWithoutFeedback,Keyboard } from 'react-native'; 2. TouchableWithoutFeedback 컴포넌트 추가 : TouchableWithoutFeedback 컴포넌트로 전체 소스를 감싸준 후, onPress 함수에 Keyboard.dismiss(); 코드 추가 return ( { Keyboard.dismiss(); console.log('dismissed keyboard'); //console 확인용 }}> { /*header*/} {/* to form*/ } (..
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')},..

티스토리툴바