FrameWork/ReactNative (8) 썸네일형 리스트형 [ReactNative] KeyBord 이벤트를 감지하고, 콜백함수 등록 → kdybord 모듈을 사용하여 키보드 이벤트를 감지하고, 콜백 함수를 등록하는 방법 → ‘keyboardDidHide’ → 키보드가 숨겨졌을때를 감지 const handleKeyboardDidHide = () => { console.log('키보드가 닫혔어요.'); }; useEffect(() => { const keyboardDidHideListener = Keyboard.addListener( 'keyboardDidHide', handleKeyboardDidHide ); return () => { keyboardDidHideListener.remove(); }; }, []); → ‘keyboardDidShow’ → 키보드가 나타날 때를 감지 const handleKeyboardDidHide = (.. [ReactNative] KeyBord 이벤트를 감지하고, 콜백함수 등록 → kdybord 모듈을 사용하여 키보드 이벤트를 감지하고, 콜백 함수를 등록하는 방법 → ‘keyboardDidHide’ → 키보드가 숨겨졌을때를 감지 const handleKeyboardDidHide = () => { console.log('키보드가 닫혔어요.'); }; useEffect(() => { const keyboardDidHideListener = Keyboard.addListener( 'keyboardDidHide', handleKeyboardDidHide ); return () => { keyboardDidHideListener.remove(); }; }, []); → ‘keyboardDidShow’ → 키보드가 나타날 때를 감지 const handleKeyboardDidHide = (.. [ReactNative] ReactNative 에서 사용하는 Tag, Optional 정리 1. : 레이아웃을 구성한다. 2. : 텍스트를 표시한다. numberOfLines={1} 및 ellipsizeMode="tail"는 텍스트가 한 줄을 넘어가면 자르고 "..." 을 표시하도록 설정해준다 3. : 이미지 표시 4. : 스크롤 구현를 사용한다. 5. ** : 리스트 데이터를 렌더링하는데 사용되는 컴포넌트 중 하나이다** 유저가 화면의 끝에 도달했을 때 새로운 데이터를 호출(fetch) 하여 비효율을 해결할 수 있게 한다. 효율적인 렌더링 : 화면에 보이는 아이템만 렌터링 하므로 성능이 향상된다. 리스트가 매우 긴 경우에도 효율적으로 처리가 가능 스크롤 지원 : 스크롤 동작이 자연스럽게 지원되며, 스크롤 위치에 따라 적절한 아이템만 렌더링 한다. code 예제 import React from.. [ReactNative] <Text/> ‘onPress’ 이벤트에 따른 기본 Gray background 없애기 React Native의 컴포넌트에서 발생하는 onPress 이벤트에 따른 기본 gray background를 없애려면 컴포넌트에 컴포넌트를 사용하여 감싸야 한다. 이를 통해 onPress 이벤트에 대한 기본 터치 피드백이 제거된다. [ 수정전 ] {setSelectedDate(date.dateString);}} style={[tw`border-red-900 h-full`]} > {date.day} [ 수정후 ] { setSelectedDate(date.dateString); }} > {date.day} [ReactNative] expo 웹에서 실행 1. expo 를 실행시키고 Terminal 에서 w 입력 2. 아래와 같이 문구가 나오면 해당 라이브러리를 설치해줍니다. npx expo install react-dom react-native-web @expo/webpack-config 3. 앱을 다시 실행시키고 Terminal 에서 w 입력 [React Native] Install 1. Project 생성 npx create-expo-app AwesomeProject cd AwesomeProject yarn add expo // expo 있다면 생략 npx expo start 2. app store 에 가서 Expo Go 앱을 다운로드 받는다. → 터미널에 출력되는 QR 코드 실행 실행이 안된다면 추가 설치 1. Expo install brew update brew install watchman 2. Watchman intall brew update brew install watchman DESIGN BY TISTORY 관리자 [ React Native ]Tag React Native 에서는 JSX 를 사용하지만, 그 JSX 는 HTML 이 아니라 React 컴포넌트를 나타내는 것 이라고 생각하면 된다. JSX 사용되는 태그는 React Native 에서 해당하는 네이티브 컴포넌트로 변환되어 실행된다.JSX(JavaScript Xml) 간단한 예로,→ 대신에 React Native에서는 를 사용해 레이아웃을 구성한다.→ 대신에 를 사용하여 텍스트를 표시한다.→ 대신에 를 사용하여 텍스트를 표시한다.→ 이미지를 표시하려면 를 사용한다.→ 스크롤을 구현하려면 를 사용한다. : 리스트 데이터를 렌더링하는데 사용되는 컴포넌트 중 하나이다유저가 화면의 끝에 도달했을 때 새로운 데이터를 호출(fetch) 하여 비효율을 해결할 수 있게 한다.효율적인 렌더링 : 화면에 보이는.. [ React Native ] Install 1. Project 생성npx create-expo-app AwesomeProject cd AwesomeProject yarn add expo // expo 있다면 생략 npx expo start 2. app store 에 가서 Expo Go 앱을 다운로드 받는다.→ 터미널에 출력되는 QR 코드 실행 실행이 안된다면 추가 설치1. Expo install npm install -g expo-cli 2. Watchman intallbrew update brew install watchman Uploaded by N2T 이전 1 다음
