생각은 길게 코딩은 짧게

상품을 찜하고 찜한 목록을 볼 수 있도록 구현해보았습니다 현재는 찜하기 코드만 첨부해보았어요! ✅ 찜하기 버튼 state 값 (default : false) constructor(props) { super(props); this.state = { dipsbuttonclicked:false,//찜하기 } } ✅ 찜하기를 위한 API async callAddWishAPI(){ //찜하기 let manager=new WebServiceManager(Constant.serviceURL+"/AddWishList?user_id="+this.id+"&goods_id="+this.item.id); let response=await manager.start(); if(response.ok) return response...

Animated.View를 사용하여 구현해보았습니당 ✅ Animated 기준값을 전역변수로 지정 constructor(props) { super(props); this.AnimatedHeaderValue = new Animated.Value(0); // Animated 기준값(0,0) this.state = { goodsContent: [], indicator : false, }; } ✅ render 부분에 Animated.View 사용 render() { const Header_Maximum_Height = 120; const Header_Minimum_Height = 60; const renderHeader = this.AnimatedHeaderValue.interpolate( { inputRange..

RadioButton에 이어 CheckBoxButton을 구현해보았답니다! - 자동로그인 부분만 포스팅해보겠습니다 ! ✅ Icon import 시켜주기 import IconRadio from 'react-native-vector-icons/MaterialIcons'; ✅ state 값 this.state = { companyNo: '', //사업자번호 passwd: '', //비밀번호 id: '', //userID validForm: false, //유효성 검사 detailLogin: 0, //0->자동로그인X, 아이디기억 X, 1->자동로그인, 2->아이디 기억 autoLoginChecked: false, rememberIdChecked: false } detailLogin : AsyncStorage에..

RadioButton으로 최신순, 가나다순으로 정렬될 수 있도록 sorting을 구현해보았습니다 ✅ import RadioButton Icon - MaterialIcon을 사용하였습니다 import IconRadio from 'react-native-vector-icons/MaterialIcons'; ✅ ComponentDidMount ( 최신순 ) componentDidMount() { this.setState({indicator : true}); //ActivityIndicator this.callGetGoodsAPI().then((response) => { this.Contents = response; this.setState({ goodsContent: response }); //최신순 this...

원래는 품명으로만 검색할 수 있도록 구현해놓았는데 이번에는 부품번호, 품명, 해쉬태그 등 모두 검색이 가능할 수 있도록 통합검색 기능을 구현해보았어요. ✅ 검색을 위한 함수 구현 //부품 검색 search = (value) => { this.setState({ goodsContent: this.dataFiltering(value) }) }; //필터링 (부품번호, 부품명 동시 검색) dataFiltering = (value) => { let goodsContent = this.Contents; goodsContent = goodsContent.filter((content) => { if(value==='') return true; else { if(content.number===value) return ..

열어분 Happy New Year ♥ List 를 불러올 때 양이 많아서 Delay가 있기 때문에 List들을 불러올 때 동안 로딩화면이 돌아가도록 구현해보았어요 📍 ActivityIndicator 란 원형의 로딩창으로 일부 활동에서 진행상황을 나타내는데 사용됩니다 ✅ Indicator.js - 로딩화면이 필요한 곳이 있을 때마다 불러서 사용하기 위해 하나의 파일을 만들어주었습니다. import React, {Component} from "react"; import { ActivityIndicator , StyleSheet, View } from "react-native"; class Indicator extends Component{ render(){ return ( ) } } const styles ..

TextInput에 모든 값이 입력되지 않았을 경우에 버튼을 비활성화 TextInput에 모든 값이 입력되었을 경우엔 버튼을 활성화 시켜보았습니다. 글자 수 제한을 구현했을 때 사용했던 삼항연산자를 사용하여 처리해주었습니다. 삼항연산자에 대해 자세한 설명이 필요하시면 요 포스팅을 보시면 됩니다 [React-Native] 글자 수 제한하기 리스트의 값들을 뿌려주는 중 해시태그의 길이가 늘어나면서 글이 레이아웃을 침범해버리는 현상이 나타났다 ! ✅ slice 함수 사용하기 배열로부터 특정 범위를 복사한 값들을 담고 있는 새로운 sayhee.tistory.com ✅ 삼항연산자 사용 {/* 상품 등록하기 버튼 부분*/} {this.state.number.trim() != 0 && this.state.name.t..

상품 리스트를 보다 상품등록을 원할 때 바로 갈 수 있게 플로팅 버튼을 구현해보았습니다! ✅ Plus 아이콘 ( AntDesign) 사용 import Icons from 'react-native-vector-icons/AntDesign'; ✅ stack class에 이동할 페이지 선언 ( AddGoods) class Stack extends Component { render() { return ( ); } } ✅ 버튼 클릭 시 상품등록 페이지로 이동 {this.props.navigation.navigate("AddGoods")}}> 💡 onpress={this.props.navigation.navigate("AddGoods"} 방식으로 할 경우 Warning: Cannot update a componen..