React + React Native + Expo (19) 썸네일형 리스트형 React Native setup with TypeScript 1. reactNative 에서 using typeScript 부분 명령어 입력 https://reactnative.dev/docs/typescript 요 아래 명령어 입력 전 어떤 위치에 해당 프로젝트를 시작할지 미리 경로 들어가있기 $ npx react-native init [MyApp name] --template react-native-template-typescript -> react-native 등 필요한 것들을 모두 설치가 자동으로 된다. ** 만약 xcode가 설치되지 않은 상태라면 에러가 나온다. 자세한 해결법은 아래에 👇 https://blckchainetc.tistory.com/386 [React Native] xcrun: error: SDK "iphoneos" cannot be l.. [React] select options box 사용하기 선택지를 주어야 할 때 select, option tag? 를 사용한다. option에는 key가 꼭 있어야 한다고 한다. 사용 예제 const [symbol, setSymbol] = useState('ETH'); . . . ETH TTK [React Native] 채팅창 스크롤 뷰 아래에 위치하도록 만들기 kepping a ScrollView scrolled to the bottom React Native Expo 채팅장 스크롤 뷰 아래에 고정시키기 React Native Expo 로 chatting 구현을 매 채팅이 보내질 때마다 rerender 를 했다. 채팅이 많아지니 render 할 때마다 계속 위 (가장 처음 메세지) 로 올라간다 처음에는 style 로 옮겨보려다가 실패 ! stackOverFlow에서 찾은 방법은 useRef 를 사용해서 ScrollView에다가 아래의 옵션값을 설정해 주었다. ref={scrollViewRef} onContentSizeChange={()=>scrollViewRef.current.scrollToEnd({animated:true})}> => 이렇게 하니까 채팅을 계속 써내려가도 screen이 위로 올라가지않고 맨 아래 (가장 최근에 보낸 메세.. [React Native Expo] Visual Studio 비쥬얼 스튜디오에서 expo android version 버전 업그레이드 시키기 (ERROR: 버전 코드는 이미 사용되었습니다. 다른 버전 코드를 사용해 보세요.) React Native Expo 앱 배포 후 업그레이드 시, 버전 업 하기 (with Visual Studio) 첫 어플을 안드로이드에 배포 후, 서버 fetch의 구문 오류로 다시 재 업그레이드를 하는 중이다. 배포할 때처럼 아래 명령어로 apk 생성 -> 폰으로 해당 어플 확인 -> app bundle 만들어 구글 플레이 콘솔에 버전 업그레이드를 하려니 에러가 났다 ! expo build:android ERROR : 버전 코드는 이미 사용되었습니다. 다른 버전 코드를 사용해 보세요. 구글 플레이 콘솔에 업데이트 할 때, app bundle을 만들기 전 configure app.json 파일에서 아래 "android": { "versionCode":1 (또는 2 - 숫자가 매번 커져야함 ) } 으로 설.. [React Native] 이전 스크린으로 돌아가서 Refresh 안될 때 / useIsFocused 비동기 통신 axios / fetch로 backend에서 데이터받아와서 뿌려줘도 한발짝 늦고 계속 undefined or 새로 추가한 채팅방 목록이 안나왔다, 찾아보니 나와 같은 문제가 발생하는 사람들이 많은 것 같았다 https://stackoverflow.com/questions/46504660/refresh-previous-screen-on-goback Refresh previous screen on goBack() I am new to React Native. How can we refresh/reload previous screen when returning to it by calling goBack()? Lets say we have 3 screens A, B, C: A -> B -> C Wh.. [React Native Expo] KeyboardAvoidingView + useHeaderHeight로 키보드 아래로 내려가게 만들기 왼쪽 그림의 키보드가 둥둥 떠있는걸 height와 맞춰주기 ! stack over flow에서 찾은 아래의 방법으로 했더니 오류 메세지에 해당 Header는 이제 곧 사라진다고 useHeaderHeight을 쓰라고 적혀있다! import { Header } from 'react-navigation-stack'; 해결 : ↓↓ 요렇게 useHeaderHeight 가져와서 import { useHeaderHeight } from '@react-navigation/elements'; KeyboardAvoidingView와 함께 사용하기 전체 코드 const sendMessage = () => { Keyboard.dismiss(); } return ( {/* Chat goes here */} setInput(t.. [React Native Expo] Font 전체 컴포넌트 폰트 변경 / default font 1. 폰트 다운 https://www.woowahan.com/#/ 우아한형제들 좋은 음식을 먹고 싶은 곳에서~! 우아한 사람들이 모여 우와하게 일하는 '우아한형제들'입니다. www.woowahan.com 2. expo-font 설치 npm install expo-font 3. assets 폴더 > fonts 폴더 > 에 다운 받은 폰트 넣기 4. config.json 추가 수정 "rnpm": { "assets": [ "./assets/fonts" ] }, 5. Text 에 폰트를 담아 return 할 component 생성 'use strict' import React, { useEffect, useState } from 'react'; import { Text } from 'react-native' i.. [React Native] Stack 사용 시 백그라운그 컬러 바꾸기 자세히 보니 어플 뒷 배경이 조금 그레이 색! -> 하얗게 or 다른 색으로 바꿔주기 const HomeScreenOptions = { headerStyle: { backgroundColor: 'lavender' }, headerTitleStyle: { color: 'black', justifyContent: 'center' }, headerTintColor: 'white', headerMode:'screen', cardStyle:{backgroundColor:'#ffffff'} } screenOptions 에 아래 두 코드 넣어주면 어플 배경이 디폴트 값 옅은 그레이에서 하얗게 된다 ! headerMode:'screen', cardStyle:{backgroundColor:'#ffffff'} stact .. [React Native Expo] Image 사진 올리기 / ImagePicker API import React, { useState } from 'react'; import { StatusBar } from 'expo-status-bar'; import { StyleSheet, View,Image, Text, TextInput, TouchableOpacity, } from 'react-native'; import { Formik } from 'formik'; //formik import { Octicons, Ionicons } from '@expo/vector-icons' //icons //keyboardavoiding view import KeyboardAvoidingWrapper from './../components/KeyboardAvoidingWrapper' // for image .. [React Native] 이중 Navigation Container / Keyboard tabBar Options 이중 Navigation Container 해결 각자 만든 파일을 합치려다 보니 각각 만든 NavigationContainer / Nvigator 가 존재해서 이중 오류가 떴다 가장 최상위 Component 말고 그 안에 감싸져있는 NavigationContainer 에 아래 옵션을 넣어주면 해결! independent={true} Keybaord 에 TabBar가 함께 뜨는 경우 -> TabBar 없애기 TextInput 등 Keyboard 사용하는 element 를 감싸는 Tabs.Navigator 에 아래 옵션 넣기 tabBarOptions={{keyboardHidesTabBar:true}} ex) //MainApp로 이름 변경 export default function MainApp({naviga.. [React Native] Bottom tab에 아이콘 추가하기 expo/vector-icons 1) npm 설치 npm i @expo/vector-icons 2) 가져올 아이콘 선택 https://icons.expo.fyi/ @expo/vector-icons directory icons.expo.fyi 3) 코드 작성 import {Ionicons, MaterialIcons, FontAwesome} from '@expo/vector-icons' export default function App() { return ( () }} /> [React Native expo] chatting app 만들기 tutorial 1) expo settings npm install -g expo-cli expo init [project 명] ---> blank 선택 cd [project명] 으로 들어가기 npm start & emulator 실행 firebase - new project - 설정 - sdk key? 코드들 복사해서 firebase.js 파일에 일단 붙여넣기 2) 아래 react navigations 설치 npm install @react-navigation/native expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context 3) App.js 가장 위에 아래 명령.. [React] 리액트 CRUD App.jsx > TodoList > TodoForm, Todo.jsx TodoList - state : todos ([]) TodoForm - state: input ('') Todo - state : edit ({id:null, value:''}) 1. 기본 세팅 https://blckchainetc.tistory.com/259 [80일차 복습] React 리액트, 웹팩, CSS 연결, 반응형 / Header 만들기 기본 세팅 어제 만든 webpack 환경 설정 을 바탕으로 아래 파일들을 복사해서 새로운 파일에 넣기! 1. package.josn 2. webpack.config.js 그리고 새로 아래의 파일들을 만들어 기본 코드 작성하기 3. index.. blckchainetc.tistory.com.. [React native] 기초 다지기 - view / 버튼 / Image / flex 세로 가로 설정 / 정렬 등 CSS only for ios (해당 요소들을 핸드폰의 구조, 메뉴에 닿지않게 padding을 자동으로 넣어줌) android 의 경우에는 자동으로padding 넣어주기 import { StyleSheet, // CSS Text, TouchableWithoutFeedback, // 효과없음 TouchableOpacity, // 투명도 0되었다가 복구됨 TouchableHighlight, // 하이라이트됨 TouchableNativeFeedback, // 클릭한 곳으로부터 파장 View, // div와 같은 기능 Image, SafeAreaView, Button, Alert, Platform, // padding 주기 위해 StatusBar, } from 'react-native'; Platform 가져와서 ->.. [React 연습 5일차] 리액트 TicTacToe Game 구현 with Hooks API 오늘 수업시간에 한 틱택토 게임 함수형 Hooks API 써서 만들기 연습 ! useReducer 함수를 따로 빼는 것과 useEffect 부분 이 아직 안익숙하다. 일단 연습은 계속 해보기 ! 오늘 처음 본(?) useEffect useEffect(()=>{}) 을 사용해서 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지 말함. 리액트는 우리가 넘긴 함수를 기억했다가 (요 함수가 'effect'라고 불림) DOM 업데이트 수행 수 불러낸다. useEffect를 꼭 컴포넌트 안에서 불러내는 이유는 ? -> 내부 state 상태 변수들, props 들에게 접근할 수 있게 된다. 함수 범위 안에 있어서 API 없이 값을 얻을 수 있기 때문 ! useEffect는 최초 렌더링에 실행되고 이후 모.. [React 연습 4일차] 리액트 TicTacToe Game 구현 승자 결정하기까지 완료 앞으로 시간여행 추가하기가 남았는데 뭔가 두렵다,,, 요건 내일 시작해봐야겟다! function Square(props){ return( {props.value} ) } class Board extends React.Component{ constructor(props) { super(props) this.state = { squares: Array(9).fill(null), xIsNext: true, } } handleClick = (i) => { const squares = this.state.squares.slice(); if (calculateWinner(squares) || square[i]) { return; } square[i] = this.state.xIsNext ? .. [React 연습 3일차] 리액트 TicTacToe Game 구현 TicTacToe Game 구현하기 연습 ! function Square(props) { return ( {props.value} ) } class Board extends React.Component { constructor(props) { super(props) this.state = { squares: Array(9).fill(null), xIsNext:true, }; } handleClick = (i) => { const squares = this.state.squares.slice(); // winner 정해진 후 클릭 안되도록 // 질문 squares[i] 는 왜 있는걸까,,,,↓↓ -> 해당 값이 True일 때 ! (null 이 아닐 때 == 이미 클릭 했을 때) console.log(squ.. [React 연습 2일차] 리액트 TicTacToe Game 구현 어제부터 시작한 React 구구단 구현 연습 ! 아래에 html, css 기본 세팅이 있다. 오늘은 어제 만든 것 외우고 진도를 쪼금만 나가봐야겟다. https://blckchainetc.tistory.com/241 [React 연습 1일차] 리액트 TicTacToe Game 구현 처음 React를 배웠다! html, css, js를 모두 합친거라니 신기하고 비동기하려고 힘들게 배운 것들이 리액트로는 쉽게 되는 것 같다. 오늘부터 React 사이트에 있는 Tictactoe game 구현하기 연습해보기 목 blckchainetc.tistory.com 어제까지 한 내용 class Square extends React.Component{ render(){ return( {this.props.value} // .. [React 연습 1일차] 리액트 TicTacToe Game 구현 처음 React를 배웠다! html, css, js를 모두 합친거라니 신기하고 비동기하려고 힘들게 배운 것들이 리액트로는 쉽게 되는 것 같다. 오늘부터 React 사이트에 있는 Tictactoe game 구현하기 연습해보기 목적 : 처음 배울 때 그리고 한 달 뒤에 얼마나 발전해있는지 확인하기 ! 먼저 위 문서에서 가져온 html, css -> 그대로 복붙해서 기본 세팅하기 https://ko.reactjs.org/tutorial/tutorial.html#setup-for-the-tutorial 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org tictactoe.html tictactoe.css .. 이전 1 다음
