목록react-native (24)

내맘대로 개발일지

[RN] Can't show Image in React Native

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"시뮬레이터에서는 이미지가 나오는데 실제 디바이스에서는 이미지가 나오지 않는아주 슬픈 버그가 발생했다.일단 나같은 경우는 s3 에서 이미지를 받아와서버 url 로 변경 후 프론트로 내려주는 방식을 사용하고있었다.보안때문에 s3 주소를 그대로 보여주면 안된다고 들어서 .encodeURI, encodeURIComponentdecodeURI, decodeURIComponent별의 별 방법을 사용해봤지만 시뮬레이터에서는 정상적인게이상하게도 실제 디바이스로만 가면 이미지가 안나왔다 ..챗지피티도 .. 블로그도 .. 스택오버플로우도 .. 어떤것도도움이 되지 않았는데 주소를 유심히 보다보니 http 로 이미지 주소가 나오고 있었다...
Javascript/React-Native 2024. 10. 23. 09:39
[RN] 이미지 불러오기 ( 외부, 내부 )

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"이미지를 호출하는 방식이 2개인데하나는 외부 URL 링크를 통해서 호출하는 방법이고하나는 내부 이미지를 호출 하는 방법이다.나는 이미지를 /assets/img 폴더에 모아놓기 때문에경로는 자기에 맞게 수정하면된다.1. 내부이미지 호출하는 방법이런식으로 source 안에 require 를 이용하여 내부 이미지를 호출한다.2. 외부이미지 호출하는 방법내부이미지 호출방법과 다른 점은 source 안에 중괄호가 하나 더 들어간다는 점과uri 를 통해 이미지를 호출한다는 것이다.이미지를 호출하는 방식이 다르다 보니 한번씩 햇갈릴때가 있는데이번기회에 햇갈리지 않도록 기억해두자 ..
Javascript/React-Native 2024. 10. 21. 17:52
[RN] 외부 폰트 적용하기

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"역시 사람의 뇌는 믿을게 안된다 .. 한달전에 한 세팅이 기억이 안나서전에 했던 설정을 다시 살펴보는 지경 .. ㅠ설정하는 방법을 기록하면서 다시한번 새기기 위해서 작성한다.1. 외부 폰트 파일 ( .ttf .otf ) 파일을 다운받는다.2. 다운받은 파일을 /assets/fonts 폴더에 저장한다.3.react-native.config.js 파일을 수정한다. ( 없으면 생성 )module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts'],};4. npx react-native-asset 명령어를 입력해주면 끝난다.5...
Javascript/React-Native 2024. 10. 21. 17:49
[RN] 스크린 이동하기

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"Nuxt 에서 사용하던 Router.push() 나React 에서 사용하던 navigate 를 사용하고있었다.간단하게 사용할 순 있는데 자꾸 까먹게되서 설정하는 방법을 기록하려고 한다.const TestCalcScreen = ({navigation}: NavigateProps) => { return (...)}export default TextScreen해당 컴포넌트를 생성할때 호출해주면된다.NavigateProps 타입은 만들어서 사용해주면되는데// types.tsximport {NativeStackScreenProps} from '@react-navigation/native-stack';import {RootS..
Javascript/React-Native 2024. 10. 14. 18:01
[RN] Button 만들기

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"React 에서 사용하던 을 사용하려고 보니 당연히 안됐고 ..이게 몇개있는데 사용방법은 다른 글을 확인해보면 좋다. [RN] Input 사용하기📱테스트 환경"react": "18.2.0""react-native": "0.74.2"React 와 React-Native 가 같다고 하니Input 도 당연히 이렇게 쓰려고 하니 당연히 안됐고 ^^ ..React Native 에서 Input 을 사용하는 방법은 다음과 같다.import { T8735.tistory.com   [RN] Alert 사용하는 방법📱테스트 환경"react": "18.2.0""react-native": "0.74.2"버튼을 눌렀을 때 API 사용후..
Javascript/React-Native 2024. 10. 14. 17:54
[RN] Input 사용하기

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"React 와 React-Native 가 같다고 하니Input 도 당연히 이렇게 쓰려고 하니 당연히 안됐고 ^^ ..React Native 에서 Input 을 사용하는 방법은 다음과 같다.import { TextInput } from 'react-native'; setYear(v)}/>특이점은 Input 의 type 처럼keyboardType 을 통해 키보드 타입을 선택할 수 있다.나머지는 React 와 동일하다.
Javascript/React-Native 2024. 10. 14. 17:48
이전 Prev 1 2 3 4 Next 다음