728x90
반응형
SMALL

React Native 16

[리액트 네이티브] non-std C++ exception error 해결하는 방법

non-std C++ exception 이라는 에러가 뜨면 당황할 것이다. 아까까지 잘되던 애플리케이션이 갑자기 C++에러라니 계속 리로드를 해도 같은 오류가 발생했다... 그래서 뤼튼 한테 물어봤다! https://wrtn.ai/share/fu24S41eoj react native 코드를 짜다가 non-std C++ exception이런 오류가 발... - 뤼튼 "non-std C++ exception" 오류는 C++ 예외 처리 메커니즘이 예상되지 않은 예외를 throw 한 경우 발생합니다. React Native는 JavaScript 코드를 실행하는 데 사용되는 기술이므로, 이 오류는 React Native 자체에서 wrtn.ai 뤼튼은 전체코드를 봐야한다고 했지만,, 내가 짠 코드의 파일은 한두개가..

[리액트네이티브] react-native 체크 박스 만들기 (Expo)

checkbox 공식 문서 https://docs.expo.dev/versions/latest/sdk/checkbox/ 위 링크에 들어가서 snack 실행해보면서 확인 Normal checkbox 이 코드를 사용함 1. install 하기 npm install expo-checkbox 2.useState ture / false값으로 set해야함 const [isChecked, setChecked] = useState(false); 3. section css를 확인 section: { flexDirection: 'row', alignItems: 'center', }, 4. paragraph, checkbox css 확인 paragraph: { fontSize: 15, }, checkbox: { margin..

[리액트 네이티브] react-native 위도 경도를 주소로 변환 역 지오로케이션(expo)

1. 아래 링크에서 회원가입 / 로그인한다 https://www.bigdatacloud.com/docs/api/reverse-geocode-to-city-api Reverse Geocoding to City API Returns detailed locality information for provided Latitude/Longitude coordinates www.bigdatacloud.com 2. API패키지에서 map API key를 생성한다. 3. 위 링크에서 값을 reqeust, response해주면 주소를 가져올 수 있다. 4. request는 위도, 경도, api 키 값을 보내주면 된다 5. response 값으로는 위 코드에서 확인하면 된다. (엄청 많음!!) 컴공이나 개발 프로젝트를 진행..

[리액트네이티브] react-native 값 다음 컴포넌트로 전달하기 (Expo)

1. 보내는 페이지와 받는 페이지 함수 부분에 props를 선언해둔다(***중요***) ex) const PageName = (props) =>{ .... 이거나 export default function PageName(props) { .... 2. 데이터가 존재하면서 다음 페이지에 값을 보내고 싶다면 아래 코드로 이벤트와 동시에 보내주면 된다. navigation.navigate('다음 페이지', { 데이터 키값 : 데이터 값 }) 3. 데이터를 받는 다음 페이지에서는 값을 props로 읽어 오면된다. props.route.params.데이터 키값 react에서는 흔히 props라고 하는 것을 실행할 것이다! 참고는 아래에서 찾으면 된다 https://reactnavigation.org/docs/na..

[리액트 네이티브] react native 확인 취소 알림창(Alert) 띄우기

react native를 개발할 때 알림창, 모달창을 가장 많이 띄우게 될 것인데 왜냐하면 사용자에게 현재 어떤 상황인지 알리는 방식도 있으며 사용자가 원하는 것을 수행하기 위해서는 예.아니오 등 여러 선택지를 제공해 줘야한다 이럴때 가장 많이 사용하는 게 Alert창이다 흔히 우리가 알고 있는 알림창인데 해당 알림창의 버튼을 클릭할 때마다 이벤트를 발생시키려면 일반 Alert창이면 안된다 그래서 알림창 커스텀이라고 생각하면 되는데 Alert.alert( "산책 끝", "산책을 끝내려면 확인을 눌러 카메라를 실행하여 사진찍어주세요(취소 시 적립이 안되고 저장되지 않습니다)", [ // The "Yes" button { text: "사진찍기", onPress: () => { setStart(true) //..

[리액트 네이티브] React-Native GPS로 사용자의 위치 가져와서 이동한 거리 선긋기 (Expo)

프로젝트로 ​ 애완동물과 산책하는 거리를 보여주는 프로젝트이다 ​ 그래서 사용자가 산책을 시작하면 서버에 데이터를 보낸다 ​ 사용자 + 산책시간 + 현재위치 (위도, 경도) ​ 를 서버로 보낸다. ​ 이렇게 만들것인데 ​ 일단 이 기능의 시나리오는 ​ 사용자가 산책하기 버튼을 클릭 사용자 + 날짜 + 산책시간(현재시간) + 현재위치(위도, 경도)를 보냄 (서버) 산책하기 테이블에 저장 [ 번호 + 사용자 + 시작시간 + 종료시간(null) ] 을 저장 모달창으로 주의 사항 및 안내할 내용을 보여준다 확인버튼을 누르면 모달창은 사라짐 산책하는 동안 onUserLocationChange로 변화하면 연결해주는 선그어주기? (GPS)기능 필요 산책 종료 버튼 클릭 사진찍을 수 있는 모달창 띄우기 확인을 누르면 ..

[리액트네이티브] react-native firebase 연동 파이어베이스 연동

종합프로젝트에서 ​ 엑스포를 사용하고 ​ firebase와 react native 연동하는 부분이 있었다 ​ 적어놔야 할 거 같아서 입력 ​ ​ 일단 파이어베이스와 연동하려면 ​ install 해야하는 부분이 있다 npm install --save @react-native-firebase/app npm install @react-native-firebase/database npm install @react-native-firebase/firestore 이렇게 3가지를 install해야한다 ​ yarn을 사용하면 yarn add @react-native-firebase/app yarn add @react-native-firebase/database yarn add @react-native-firebase/..

[리액트네이티브] react-native firebase firestore 데이터 읽기

일단은 firebase와 연동 했던 부분의 ​ 코드를 가져와야겠죠? ​ firebaseConfig.js에 내 데이터베이스와 연동 되어 있을 것이다 import { db } from './firebaseConfig'; 그리고 해당 데이터 베이스에 있는 값을 읽어 와야할 것이다 //firestor 연동 const [users, setUsers] = useState(); const readfromDB = async () => { try { const data = await getDocs(collection(db, "Station")) setUsers(data.docs.map(doc => ({ ...doc.data(), id: doc.id }))) users?.map((row, idx) => { console...

[리액트네이티브] react-native header 헤더 꾸미기

최종 프로젝트는 아니지만 ​ 4학년 졸업 요건으로 종합프로젝트를 진행하고 있다! 여기에서도 아쉽게 또 프론트,, 사용자 어플리케이션을 만든다 ​ 상세한 내용은 노션에 정리했움! ​ 그래서 바로 진행할거임!~! ​ ​ 헤더 만들기 원래는 그냥 컴포넌트를 가져와서 넣는게 대부분인데 ​ 나는 statck navigation을 사용하기 때문에 ​ stack navigation을 커스텀 하기로 했다!!! ​ ​ 참고: https://devbksheen.tistory.com/entry/React-Navigtion%EC%9D%98-Header-%EC%BB%A4%EC%8A%A4%ED%85%80%ED%95%98%EA%B8%B0#%ED%--%A-%EB%-D%--%EC%-D%--%--%EC%A-%-C%EC%B-%A-%-C%..

[리액트네이티브] react-native Dimension 화면 비율 맞추기

핸드폰 마다 길이 값이 다르게 생겼기 때문에 ​ width나 height를 각 픽셀 값으로 주면 ​ 실행했을때 ​ 조금 깨지거나 이상한 부분에 들어갈 수 있다 ​ 그래서 %로 많이 사용하는데 ​ ​ 나는 ​ Dimension을 사용한다 css에서 사용하는 부분은 container: { flex: 1, backgroundColor: '#fff', width:Dimensions.get('window').width, height:Dimensions.get('window').height, }, 이렇게 많이 사용한다 ​ Dimensions . get 에는 ​ window와 screen이 있다ㅏ ​ window : 현재 앱에서 사용할 수 있는 영역의 크기를 가져온다. screen : 전체 화면의 크기를 가져온다. ..

728x90