코딩생활/ReactNative24 [React Native] 3-13 날짜 및 시간 수정 기능 구현하기 이제 로그를 작성할 때, react-native-modal-datetime-picker라는 라이브러리를 사용하여 로그의 날짜 및 시간을 수정하는 기능을 구현해보겠습니다. $ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker 이 라이브러리는 Ios와 안드로이드에 각각의 플랫폼에 특화된 날씨/시간 선택 컴포넌트를 제공합니다. 이 라이브러리는 네이티브 코드를 사용하기 때문에 시뮬레이터를 재실행해주어야합니다. 우선 WriteScreen에서 date 상태를 만들어줍니다. 그리고 onSave에서 수정하거나 새로 저장할 때 date 상태를 사용하도록 변경합니다. WriteHeader에는 date와 onChangeDate.. 2023. 4. 4. [React Native] 3-12 달력 기능 구현하기 (2) 이번에는 특정 날짜를 선택했을 때 그날 작성된 로그들을 달력 하단에 목록으로 띄워볼 것 입니다. 이 때 FeedList를 재사용할 수 있습니다. FeddList를 CalnedarView 하단에 보여주는 것은 아닙니다. FeedList에서 사용한 FlatList에 ListHeaderComponent라는 Props를 사용할 것입니다. components/FeedList.js import React from 'react'; import {View, StyleSheet, FlatList} from 'react-native'; import FeedListItem from './FeedListItem'; function FeedList({logs, onScrolledToBottom, ListHeaderCompone.. 2023. 4. 3. [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. 이전 1 2 3 4 ··· 6 다음 반응형
