분류 전체보기125 [React Native] 3-12 달력 기능 구현하기 (1) 마지막 구성할 화면은 달력화면 입니다. react-native-calendars라는 라이브러리를 사용합니다. $ yarn add react-native-calencars components/CalendarView.js import React from 'react'; import {StyleSheet} from 'react-native'; import {Calendar} from 'react-native-calendars/src/index'; function CalendarView() { return ; } const styles = StyleSheet.create({ calendar: { borderBottomWidth: 1, borderBottomColor: '#e0e0e0', }, }); export.. 2023. 3. 31. [React Native] 3-11 검색 기능 구현하기 (2) 이제 SearchHeader 컴포넌트 UI를 구성하겠습니다. components/SearchHeader.js import React from 'react'; import { View, StyleSheet, Text, useWindowDimensions, Pressable, TextInput, } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; function SearchHeader() { const {width} = useWindowDimensions(); return ( [styles.button, pressed && {opacity: 0.5}]}> ); } const styles = StyleSheet.c.. 2023. 3. 30. [React Native] 3-11 검색 기능 구현하기 (1) 이제 검색 기능을 만들려면 헤더 부분에 텍스트를 입력하여야 함으로 헤더를 커스터마이징해야 합니다. MainTab 컴포넌트에서 화면에 따라 제목을 다르게 설정하기 위해 getHeaderTitle라는 함수를 만들었습니다. 네이티브 스택 네비게이터의 headerTitle 옵션에는 문자열이 아닌 JSX를 넣어줄수도 있습니다. 우선 SearchHeader 컴포넌트를 생성하겠습니다. conponents/SearchHeader.js import React from 'react'; import {View, StyleSheet, Text} from 'react-native'; function SearchHeader() { return Hello; } const styles = StyleSheet.create({ bloc.. 2023. 3. 27. [React Native] 3-10 삭제 기능 구현하기 context/LogContext.js import {createContext, useState} from 'react'; import React from 'react'; import {v4} from 'uuid'; const LogContext = createContext(); export function LogContextProvider({children}) { (...) const onModify = modified => { const nextLogs = logs.map(log => (log.id === modified.id ? modified : log)); setLogs(nextLogs); }; // ----추가 ---- const onRemove = id => { const nextLogs =.. 2023. 3. 26. 이전 1 2 3 4 5 6 7 8 ··· 32 다음 반응형
