React Native13 [React Native] TextInput 마음대로 사용하기, 유효값 체크 React Native 200 - TextInput 리액트네이티브 공식 사이트 를 방문하면 TextInput 의 사용법을 자세하게 알 수 있다. setTitle(text)} autoCapitalize="sentences" autoCorrect returnKeyType="next" onEndEditing={() => console.log("onEndEditing")} onSubmitEditing={() => console.log("onSubmitEditing")} />TextInput 에 여러 아규먼트를 사용할 수 있다. 신기한 기능들이 많은데 하나씩 살펴보자 대부분은 이름에서 알 수 있다. 헷갈리는 것만 기록한다. onChangeText : 텍스트가 바뀔 때 마다 함수 적용 returnKeyType : .. 2020. 12. 16. [React Native] 아이템 주문목록에 담기 React Native 103 - 주문로직 장바구니에 있는 아이템은 '바로주문' 버튼을 누르면 '주문목록' 에 담긴다. 장바구니 아이템들을 그대로 주문목록에 담아주면 된다. 리듀서와 액션을 만들어보자. actions/orders.js export const ADD_ORDER = 'ADD_ORDER'; export const addOrder = (cartItems, totalAmount) => { return { type: ADD_ORDER, orderData: { items: cartItems, amount: totalAmount } }; }; CartScreen 컴포넌트에서 데이터를 전달받은 액션함수는 items, amount 를 리듀서로 전달한다. reduc.. 2020. 12. 7. [React Native] 장바구니 삭제기능 구현 아이템 삭제로직 장바구니 안에 담긴 아이템을 삭제하는 것을 만들어 보고자 한다. cart 라는 액션과 리듀서를 통해 REMOVE_FROM_CART 의 액션이 주어지면 state 의 아이템을 제거하는 로직을 세워본다. 진행 순서는 다음과 같다. 장바구니에 들어가서 아이템 삭제버튼을 누른다. → useDispatch 함수에서 액션함수 REMOVE_FROM_CART 를 호출한다. 아이템 수량이 1개있으면 아이템을 삭제한다. → reducer 에서 해결한다. 2개이상 있으면 수량을 하나 줄인다. → reducer 에서 해결한다. 전체금액(totalAmount)도 같이 변경해준다. → reducer 에서 해결한다. CartScreen에서 삭제시 호출함수 설정 const dispatch = useDispatch().. 2020. 12. 6. [React Native] 헤더버튼 React Native - 헤더버튼 헤더버튼 import { HeaderButtons, Item } from 'react-navigation-header-buttons'; import HeaderButton from '../../components/UI/HeaderButton'; ... const ProductOverviewScreen = (props) => { } ProductOverviewScreen.navigationOptions = (navData) => { return { headerTitle: '포도마켓', headerRight: () => ( { navData.navigation.navigate('Cart'); }} /> ) }; };.. 2020. 11. 30. [React Native] DrawerNavigator, StackNavigator Shop App 004 Delete Items 추가하기 **store/actions/cart.js** export const ADD_TO_CART = 'ADD_TO_CART'; export const REMOVE_FROM_CART = 'REMOVE_FROM_CART'; export const addToCart = (product) => { return { type: ADD_TO_CART, product: product }; }; export const removeFromCart = (productId) => { return { type: REMOVE_FROM_CART, pid: productId }; }; 장바구니에서 아이템을 지우는 액션함수를 하나 생성합니다. `removeFromCart` **stor.. 2020. 7. 6. [React Native] Redux(Reducer, Actions) Shop App - 003 상품들을 장바구니에 추가하기 새로운 리듀서와, 액션함수를 생성합니다. 먼저 액션을 만들어봅시다. store/actions/cart.js export const ADD_TO_CART = 'ADD_TO_CART'; export const addToCart = (product) => { return { type: ADD_TO_CART, product: product }; }; 나중에 dispatch 함수에서 액션을 호출할 때 사용하게 될 ADD_TO_CART 변수를 정의하고, 이를 addToCart라는 액션함수에 type으로 넣어줍니다. 이 액션함수의 인풋은 상품인 product입니다. store/reducer/cart.js import { ADD_TO_CART } f.. 2020. 7. 5. [React Native] Touchable Component Shop App 002 1 상품 아이템 컴포넌트 저번 시간에는 상품 개요를 보여주는 ProductOverviewScreen 화면에서, FlatList를 통해 상품 데이터 하나하나를 리스트형태로 보여주었었습니다. 오늘은 위 리스트에 담기는 하나의 상품 컴포넌트를 따로 제작해봅시다. 하나의 양식이 있고, 이것을 반복하는 형식이 있다면, 컴포넌트 객체로 따로 만드는 것이 좋습니다. components/shop/ProductItem.js import React from 'react'; import { View, Text, Image, StyleSheet, Button } from 'react-native'; import Colors from '../../constants/Co.. 2020. 7. 5. [React Native] redux, navigation 세팅 Shop App 001 쇼핑몰 앱을 만들어봅니다. 1 계획 1) product overview screen : image, title, cart, detail button 2) cart detail screen 3) product detail screen 4) Navigation : shop, orders, manage products orders mange products : plus button → edit product screen 2 생성, Setup Create $ expo init wordmall Setup $ npm install --save react-native react-native-screens $ npm install --save redux react-redux react-navig.. 2020. 7. 5. [React Native] 5 React Navigation 설정 Font 불러오기 $ expo install expo-font font 가 로딩되면 화면이 렌더링 되도록 구성해봅시다. 폰트가 담긴 ttf 파일을 assets/fonts 에 넣어주고, 폰트를 불러옵니다. App.js import React, { useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import * as Font from 'expo-font'; import { AppLoading } from 'expo'; function fetchFonts() { Font.loadAsync({ 'open-sans': require('./as.. 2020. 5. 16. [React Native] 4 반응형, 적응형 사용자 인터페이스 만들기 React Native 004 - Responsive, Adaptive User Interfaces 반응형, 적응형 사용자 인터페이스 자동적으로 모든 가능한 디바이스에 알맞은 모양으로 적용되도록 만들어 봅니다. 디바이스 차원, 방향(orientation)을 찾는 방법을 알아봅니다. 크기와 방향에 근거한 레이아웃 조정해봅니다. iOS 또는 Android 등 다른 디바이스 플랫폼을 구별하는 방법을 알아봅니다. 플랫폼 기반 적응형 코드 / UI 를 만들어봅니다. Dimension API width: '25%' 위와 같이 넓이를 정할 때는 퍼센트를 사용하는 것이 일관성있으며, minWidth, maxWidth 도 퍼센트로 지정하는 것이 좋습니다. 더 좋은 방법은 Dimensiion API를 사용하.. 2020. 5. 10. 728x90 이전 1 2 다음
