하이브리드앱18 [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-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. 이전 1 2 3 4 5 다음 반응형
