하이브리드앱18 [React Native] 3-5 useRef로 컴포넌트 래퍼런스 선택하기 useRef는 함수 컴포넌트 에서 컴포넌트의 래퍼런스를 선택 할 수 있게 하는 Hook입니다. 제목을 입력후 Enter을 누르면 포커스를 이동시키고 싶다면 이럴 때는 내용의 TextInput의 래퍼런스를 포커스 해줘야합니다 componets/WriteEditor.js import React, {useRef} from 'react'; import {View, StyleSheet, TextInput} from 'react-native'; function WriteEditor({title, body, onChangeTitle, onChangeBody}) { const bodyRef = useRef(); return ( ); } const styles = StyleSheet.create({ block: { fl.. 2023. 3. 15. [React Native] 3-4 WriteScreen 준비하기 screens/RootStack.js import React from 'react'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import MainTab from './MainTab'; import WriteScreen from './WriteScreen'; const Stack = createNativeStackNavigator(); function RootStack() { return ( ); } export default RootStack; 일단 WriteScreen의 기본적으로 보이는 헤더를 숨겼습니다. 다음으론 WriteScreen에서 사용할 헤더를 직접 만들겠습니다. components/WriteHea.. 2023. 3. 14. [React Native] 3-4 새 글 작성하기 이번엔 WriteScreen의 기능을 구현하겠습니다. 그리고 FeedsScreen에 WriteScreen을 열 수 있는 FloatingWriteButton도 만들어 보겠습니다. 프로젝트에 components 디렉터리를 만들고 그 안에 파일을 작성하세요 components/FloatingWriteButton import React from 'react'; import {View, StyleSheet, Platform, Pressable} from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; function FloatingWriteButton() { return ( [ styles.button, Platform.OS .. 2023. 3. 14. [React Native] 3-3 useContext Hooks 함수 Render Props 는 리액트에 Hooks가 없던 시절 유용했고 지금은 그렇게 사용하지 않습니다. (,,,,,,ㅋ) 왜냐하면 리액트에 useContext라는 Hook을 사용하면 Context의 값을 훨씬 간결하게 사용할 수 있습니다. screens/FeedsScreen.js import React, {useContext} from 'react'; import {View, StyleSheet, Text} from 'react-native'; import LogContext from '../contexts/LogContext'; function FeedsScreen() { const value = useContext(LogContext); return ( {value} ); } const styles =.. 2023. 3. 13. 이전 1 2 3 4 5 다음 반응형
