생각은 길게 코딩은 짧게

Modal 구현할 때마다 방황하는 내가 싫어 제대로 포스팅한다 !!!! ✅ 모달을 띄우는 부울 값 this.state = { number: null, modal: false, } handleModal = () => { this.setState({ modal: this.state.modal ? false : true, }); }; ✅ 상품등록 버튼 시 모달을 띄워야 하므로 onPress 시 handleModal 함수 부르기 상품등록하기 ✅ class SearchModal에 Props로 전달할 값들 선언 {this.state.modal && ( this.setState({ modal: this.state.modal ? false : true })} />)} ✅ SearchModal 에서 Modal 구현해주기..

검색을 원하는 text를 선택 시 구글 웹페이지로 이동해 검색할 수 있도록 구현해보았습니다 ✅ react-native document에 openURL()을 쓰는 방법을 찾아 적용해보았어요 적용하기 import { Linking } from 'react-native'; Linking.openURL('http://www.google.com/search?q=' + this.props.item.number)}> 저는 부품번호를 검색하기 위해 부품번호의 값을 props로 받아 Linking 해주었습니다 적용화면

안녕하세요 세히이 입니다 ! 카메라 구현하는데 애를 많이 먹었습니다 흑 RN 카메라 Vision 카메라 Image Picker 여러가지 찾아보았는데 RN 카메라는 deprecated 되었다고 하여 쓰지 않았고 Image-Picker을 시도해보았어요 카메라 아이콘을 누르면 모달이 뜨며 실행이 되도록 하였습니다 Image-Picker 설치 npm install --save react-native-image-picker android / app / src / main / AndroidManifest.xml 접근 권한 수정 모달 구현 ( UploadModeModal.js ) import React from "react"; import { StyleSheet, Modal, View, Pressable, Text ..

안녕하세요 세히이 입니다 며칠 시도하다 Icon 넣기를 결국 성공시켰답니다...!! 간단한 것이여도 꼬이면 참 힘든 것 같아요 ㅠ ㅠ 먼저 Icon 사용을 위해 npm으로 설치 ( yarn 으로 설치해도 되는데 전 npm을 사용했어요 ) npm install --save react-native-vector-icons yarn 으로 설치 yarn add react-native-vector-icons android > app > build.gradle ( 경로 중요 !!!! ) apply from: "../../node_modules/react-native/react.gradle" // 원래 작성되어 있는 코드 apply from: "../../node_modules/react-native-vector-ic..

안녕하세요 세히이 입니다 이번에는 네비게이션을 적용해보았답니다! Stack Navigator 1) 리액트 네비게이션 라이브러리 & 추가 라이브러리 설치 npm install @react-navigation/native #아래도 필수이므로 설치해주세요! npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view 2) Stack 을 위한 라이브러리 설치 npm install @react-navigation/native-stack 3) 필요한 component 를 import 시켜주기 import ..

안녕하세요 세히이 입니다 저번에 썼던 json 가져오기를 보고 오시면 더욱 이해가 잘 될 것 같아요 :) FlatList는 언제 써야 하는가 ? 모든 데이터를 한번에 렌더링하는 것이 아니라 사용자가 swipe를 할 때 swipe한 화면의 크기만큼 자동으로 리렌더링이 되어 보여지는 컴포넌트 데이터의 길이가 가변적이고, 데이터의 양을 예측할 수 없는 경우에 사용하기 적절하다. View 속성 비교하기 RecyclerListView 도 써보고 싶었는데 너무 자료가 없어서 아직 못했어요 ㅠ 성공하면 포스팅 해보겠습니당 참고한 코드 return ( ( )} /> ); React에서는 map으로 돌려서 GetRepairList 클래스를 만들어주어 뿌려주는 방식으로 했지만 React-Native의 FlatList는 m..

React에서 해보았던 Json파일 가져오기를 React-Native에서도 해보았어요! Client와 Server간의 Data 교환은 request와 response message를 통해 이루어집니다. Client는 Server에 있는 Data를 받기 위해 request message를 요청하게 됩니다. 이후 Server는 요청 받은 request message를 통해 response message로 응답을 하게 됩니다. http://,,,/goods/GetGoods 에 예전에 올렸던 Json 데이터를 가져와보겠습니다 먼저 필요한 컴포넌트들을 import 해줍니다. 저는 util 폴더를 따로 만들었어요 constant_variables.js ( URL을 포함하고 있습니다 ) export default c..