유미의 기록들

애뮬레이터가 아닌 안드로이드 휴대폰에서 실행하고자 한다 1️⃣ 휴대폰 기기를 개발자모드로 활성화 해준다 *개발자 모드는 앱을 개발하기 위해서, 세부적인 설정을 변경하기 위해서 사용한다. 하지만 개발자 모드를 사용할 일이 거의 없어 숨겨져 있는데 이를 활성화를 시켜주어야 한다 - 개발자 모드 활성화 설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드 번호 빌드번호를 연속으로 5~6회 정도 클릭하면 "개발자 모드 켰습니다" 라는 문구가 나온다 그러면 개발자 옵션이 활성화 된다 2️⃣ 안드로이드가 설치되어 있는 경로를 복사한다 3️⃣ cmd창을 관리자 권한으로 실행하고 연결된 디바이스를 확인한다 cd C:\Users\VIP\AppData\Local\Android\Sdk\platform-tools adb dev..

필수항목을 다 입력했을 때, 버튼이 활성화 되도록 구현하겠다 //입력값 유효성 검사 onValueChange = (value) => { this.setState(value,()=>{ let isValidForm = true; if (this.state.companyNo.trim().length < 10) { // 조건 필요시 추가 isValidForm = false; } if (this.state.passwd.trim().length == 0) { isValidForm = false; } console.log("isValidForm", isValidForm); this.setState({ validForm: isValidForm }); }); } * id인 사업자 번호는 10자리수가 넘어야 함 *vali..

상품을 숨김 버튼을 클릭했을때 Home으로 가면서 refresh되어야 홈에 있던 상품이 없어지게 된다 즉, Home으로 갈때 상품을 불러오는 API를 다시 호출을 해야한다 Home에서 Item_Detail로 갈 때 부품목록을 호출하는 메소드인 refresh함수를 props로 전달한다 goGoodsDetailScreen=()=> { this.props.navigation.push('GoodsDetail',{id:this.props.item.id, userID:this.props.item.userID, refresh:this.goGetGoods}); } //부품 목록 호출 메서드 goGetGoods = () => { this.setState({indicator : true}); this.callGetGood..

1. assets 폴더 확인 android/app/src/main/assets 폴더가 있는지 확인하고, 없다면 만들어준다 2. bundle 파일 생성 프로젝트 폴더에서 아래의 명령어로 bundle파일을 생성한다 npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ 이렇게 index.android.bundle 파일이 생성된 것을 확인할 수 있다 3. android studio에서 빌드 상단 메뉴바에서 build > build apk 를 실..

상품 Detail 페이지에서 이미지를 넘길때 슬라이더를 구현해보고자 한다. react-native-web-swiper 라이브러리를 사용할 것이다 ✅ swiper 라이브러리 설치 npm i react-native-web-swiper https://github.com/reactrondev/react-native-web-swiper GitHub - reactrondev/react-native-web-swiper: Swiper-Slider for React-Native and React-Native-Web Swiper-Slider for React-Native and React-Native-Web - GitHub - reactrondev/react-native-web-swiper: Swiper-Slider fo..

상품을 찜했을 때 내가 찜한 상품들이 관심목록에 보이도록 구현해보기로 했다 찜하기 Home의 상품디테일 모달페이지에 하트 버튼을 추가하였다 {/*찜하기 버튼*/} state변수인 dipsbuttonclicked가 true이면 빨간색으로, false이면 회색(기본)으로 아이콘 색을 변경되게 하였다 버튼을 클릭했을 경우 dipsButtonClicked=()=>{ if (this.state.dipsbuttonclicked == false) { this.callAddWishAPI().then((response)=>{ console.log(response); }) console.log("색칠하트"); this.setState({ dipsbuttonclicked: true }); } else { this.callR..

지금 진행하고 있는 프로젝트 앱은 카메라/앨범/위치추적 관련 서비스를 이용하기 때문에 이를 접근하기 위한 권한 허용 메시지를 띄우려고 한다 앱 권한을 구현하기 위한 방법에는 2가지가 있다. 1️⃣ React Native에서 제공하는 PermissionsAndroid를 사용하는 방법 (안드로이드만 가능) 2️⃣ React Native permissions 라이브러리를 이용하는 방법 나는 PermissionsAndroid를 사용하여 구현해보겠다 https://reactnative.dev/docs/permissionsandroid PermissionsAndroid · React Native Project with Native Code Required reactnative.dev 구현하기 전에 몇가지 생각해야 ..

상품이미지를 등록할 때 사진을 카메라에서 촬영할 지 아니면 갤러리에서 선택할 지 사용자가 선택하도록 모달을 띄어보려고 한다. React Native에서는 Modal이라는 컴포넌트를 제공한다 따라서 import해서 사용할 수 있다 https://reactnative.dev/docs/modal Modal · React Native The Modal component is a basic way to present content above an enclosing view. reactnative.dev import {Modal} from 'react-native'; class AddGoods extends Component { constructor(props) { super(props); this.state = ..

navigation.navigate() 함수로 페이지 이동을 할 때 두번째 인자에 Params를 전달할 수 있었다 add_goods.js componentDidUpdate(prevProps,prevState){ if(prevProps.route.params.imageURLs !=this.props.route.params.imageURLs){ this.setState({imageURLs: this.state.imageURLs.concat(this.props.route.params.imageURLs)r}); } } this.props.navigation.push("Gallery", { imageLength: this.state.imageURLs.length }); gallery.js this.props.na..

❗ Stack안에 Tab이 있는 구조여서 Home페이지(Tab)에서 뒤로가기 했을 경우 로그인페이지(Stack)가 보이는 문제가 있었다 따라서 Home페이지에서 뒤로가기를 했을 경우 , Alert이 뜨고 앱을 종료하는 것을 해보겠다 https://reactnative.dev/docs/backhandler BackHandler · React Native The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Andro..