목록reactjs (21)
바르고 뜨겁게
ReactNative - SoundPlayer 사용법패키지 추가https://www.npmjs.com/package/react-native-sound-playerimport SoundPlayer from 'react-native-sound-player';안드로이드사용할 음악 파일을 아래 경로에 위치 시킨다./android/app/src/main/res/raw/ring.mp3아이폰xCode 에서 위에 위치 시킨 파일을 스크린샷 처럼 추가 한다. 사용 try { SoundPlayer.loadSoundFile('dial', 'mp3'); SoundPlayer.play(); } catch (e) { console.log(`cannot play the sound file`, e) }
react-native webRTC normal arm64 Error리액트 네이티브에서 webRTC 패키지를 적용하고 아이폰에 빌드시 아래와 같은 에러가 난다.** BUILD FAILED ** The following build commands failed: Ld [프로젝트 경로] normal arm64 (1 failure)xCode 에서 좀 더 자세히 보면'[프로젝트 경로]' does not contain bitcode. You must rebuild it with bitcode enabled (Xcode setting ENABLE_BITCODE), obtain an updated library from the vendor, or disable bitcode for this target. fil..
React-Native run-ios —device 빌드 에러react-native 에서 아이폰 장비로 빌드시 에러react-native run-ios --device [아이폰 장비 이름]error Failed to install the app on the device because we couldn't execute the "ios-deploy" command. Please install it by running "npm install -g ios-deploy" and try again. Run CLI with --verbose flag for more details.ios-deploy 설치 시도 또 에러sudo npm install -g ios-deploy** BUILD FAILED ** npm ..
setInterval 사용시 func.apply is not a function 에러자바스크립트에서는 함수 호출 자리에 함수의 이름이 아니라 함수명() 처럼 코딩시 정의된 함수가 즉시 호출되어 버린다.따라서 아래와 같이 코딩하면 func.apply is not a function 에러를 만나게 된다. 잘못된 사용법_myFunc = () => { ... } this._timerId = setInterval(this.myFunc(),1000);코드 실행시 즉시 1번 호출이 되고, 10초 뒤엔 func.apply is not a function 에러를 만나게 된다.의도는 myFunc() 함수를 10초마다 호출하여 실행하는 것이지만, 해결 방법_myFunc = () => { ... } this._time..
* navigation을 이용한 전달Req.jsnavigation.navigate("Res", { REQ_NO: "112233", REQ_DATA: "abcd" });Res.js const { navigation } = this.props; const REQ_NO = navigation.getParam("REQ_NO"); const REQ_DATA = navigation.getParam("REQ_DATA");
root 폴더에서 아래 명령어 입력cd android && ./gradlew signingReport 아래 정보들을 얻을 수 있다Variant , Config , Store , Alias , MD5 , SHA1 , SHA-256 , Valid. until
ReactNative - 컴포넌트란?UI를 독립적이고 재사용 가능하도록 나눈 조각 함수형 컴포넌트클래스형 컴포넌트보다 상대적으로 가벼워 첫 마운팅 속도가 빠름, function fnComponents(props){ return ( Hello {props} ); } 클래스형 컴포넌트컴포넌트 생명주기 메서드를 사용하거나 state를 사용할경우 반드시 class를 사용하여 컴포넌트를 만들어야 함. const classComponents = () => { return( Hello {props} ); } 사용방법파스칼 표기법 사용 : 컴포넌트 이름의 첫글자는 반드시 영문 대문자를 사용해야된다. (DOM 태그와 구분)단 하나의 root 엘리먼트를 return 해야한다.props란? : 부모 컴포넌트에서 자식 컴포넌..
ReactNative - 슬라이드 배너 설치 yarn add react-native-swiper-사용 import Swiper from "react-native-swiper";
ReactNative - CSS 두가지 방법 StyleSheet 사용 import React from "react"; import { ActivityIndicator, View, StyleSheet } from "react-native"; import { TINT_COLOR, BG_COLOR } from "../constants/Colors"; const styled = StyleSheet.create.create({ container: { backgroundColor: "black", flex: 1, justifyContent:"space-around" } }); export default () => ( ); styled-components 사용 import React from "react"..
ReactNative - 화면이동 버튼 TouchableOpacityTouchableOpacity을 사용해서 버튼을 만들고, 클릭시 Detail로 이동시킨다. Movies.js import React from "react"; import { Text, TouchableOpacity } from "react-native"; // 모든 화면은 navigation Prop를 가지고 있다. // navigate 이동시 경로를 적지 않아도 자동으로 찾아준다 // (App.js에서 선언된 MainNavigation에 있음) export default ({ navigation }) => Movies navigation.navigate('Detail')}> Go to detail -navigation/MainNav..