React Native

React Native

Locofy.ai - Figma 를 React, React Native, HTML/CSS, Next.js 코드 변환

Locofy.ai는 선택한 언어로 모바일 앱 및 웹용 프로덕션 준비 코드 를 작성합니다! 더 복잡한 문제에 집중할 수 있도록 시간을 50~60% 절약할 수 있습니다. React, Vue, Angular, HTML-CSS, SwiftUI , Jetpack Compose/Kotlin, Flutter, React Native 등이 준비되어 있습니다! 코드를 내보내거나 Netlify로 배포하세요. 이미 사용하고 있는 도구를 계속 사용하십시오. 우리는 Figma, Sketch 및 Adobe 와 통합 합니다. 플러그인 또는 빌더를 사용하여 디자인에 태그를 지정하고 짜잔! 보너스로 Material UI, Bootstrap, Ant Design 및 기타 인기 있는 라이브러리 에서 미리 빌드된 구성 요소 를 끌어다 놓을..

React Native

react-native splash 0.68 + 이상 버전에서 에러 처리 방법

Make로 작업하시는 분들에 한해 에러 처리 방법입니다. Make를 사용안하시는 분들은 1단계 방법추가하시고 SplashScreen.show(this, R.style.SplashScreenTheme, true); 3번째 매개변수 전달하면 됩니다. react-native-splash-screen 설치 yarn add react-native-splash-screen react-naitve link react-native-splash-screen @bam.tech/react-native-make 설치 yarn add @bam.tech/react-native-make react-native set-splash --path 경로 --resize center --background 색상 하시게 되면 아래와 같이 M..

React Native

react-native webview 영역이 사라질 경우 앱 꺼지는 문제

react-native 에서 WebView 사용시 일부 기기의 Android에서 충돌로 인해 앱이 강제 종료가 되는 문제가 발생 style 속성에 opacity:0.99, minHeight:1를 추가를 하는것으로 해결이 가능하지만 정상적인 해결 방법은 아닌것 같다

React Native

소셜로그인 진행시 Android hasykey 추출 3가지 방법

소셜로그인 진행시 Android HashKey 추출방법 공유드립니다. 아시는분들도 계실테지만 참고만해주세요 mac & window 별로 정리해두었습니다. 1. android Debug keystore 안드로이드에서 디버그 key 추출 하는 방법이다. -alias 설정된 android 이름이고 건드리지 않았다면 androiddebugkey가 default 이다 -keystore 에는 deebug.keystore 위치 경로를 작성해주고 실행을 하면 키를 발급받을수있다. Mac keytool -exportcert -alias androiddebugkey -keystore ~./android/app/debug.keystore -storepass android -keypass android | openssl sh..

React Native

NPM libs colors, faker 사용 주의

colors, faker 모듈 쓰시는분 꼭 참고하세요. 사건개요 - colors, faker 모듈 개발자가 오픈소스 커뮤니티를 대기업이 무임승차해서 돈 버는게 못마땅함. - 열받은 개발자가 무한루프 코드를 npm 업로드 - 난리가 남(주당 다운로드가 2천만건 ) 처음에는 ua-parser-js 처럼 개발자 권한 탈취된줄 알았음 - 알고보니 개발자가 일부러 그런것을 발견 - Github가 개발자의 npm, github 권한을 회수하고 npm 모듈 버전을 강제로 되돌렸다고하네요 https://www.bleepingcomputer.com/news/security/dev-corrupts-npm-libs-colors-and-faker-breaking-thousands-of-apps/

React Native

Chocolatey로 윈도우에서도 패키지 관리를 해보자

https://nodejs.org/ko/download/releases/ 이전 릴리스 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Chocolatey로 윈도우에서도 패키지 관리를 해보자 https://tutorialpost.apptilus.com/code/posts/tools/chocolatey-windows-package-manager/

React Native

React와 ElectronJS로 데스크톱 앱 만들어보기

React와 ElectronJS로 데스크톱 앱 만들어보기 medium.com/withj-kr/react%EC%99%80-electronjs%EB%A1%9C-%EB%8D%B0%EC%8A%A4%ED%81%AC%ED%86%B1-%EC%95%B1-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0-1-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-6f83562de839 [React와 ElectronJS로 데스크톱 앱 만들어보기] [#1] 프로젝트 세팅하기 아래 블로그로 가시면 더욱 많은 정보를 접해보실 수 있습니다. medium.com kyuhyuk.kr/article/electron/2020/0..

React Native

안드로이드 기기에서 진동/무음모드를 설정시 알림음 해결 방법

react-native-push-notification 라이브러리 사용할 경우 안드로이드 기기에서 진동/무음모드를 설정시 알림음 해결 방법 node_modules/react-native-push-notification/android/src/main/java/com/dieam/reactnativepushnotification/modules/RNPushNotificationHelper.java 위 경로의 RNPushNotificationHelper.java 파일 수정 try { if (soundUri != null) { AudioManager mAudioManager = (AudioManager) context.getSystemService(Context.AUDIO_SERVICE); mAudioManager..

React Native

react-native webview alert message url 안보이도록 ...

react-native 웹뷰로 구성된 화면에서 자바스크립트로 alert 메시지를 띄울때 url 표시가 되는데 보기가 싫어서 url 삭제하고자 하는 경우 아래처럼 코드를 추가해주면 됩니다 android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java // 아래 코드 추가 import android.app.AlertDialog; import android.content.DialogInterface; import android.webkit.JsResult; protected void setupWebChromeClient(ReactContext reactContext, WebView webView) { if (mAllowsFullscr..

React Native

MAC BigSur 업데이트 후 Xcode 에뮬레이터 디버그 실행안되는 오류 수정 방법

MAC BigSur 업데이트 후 Xcode 에뮬레이터 디버그 실행안되는 오류 수정 방법 빌드 오류 원인 Xcode12에서 ARM기반 맥(애플실리콘)을 지원함에 따라 아이폰 시뮬레이터에 ARM용 아키텍쳐 arm64가 추가돼 발생 해결 방법 Build Setting에 EXCLUDED_ARCHS에 arm64를 추가 VALID_ARCHS 제거 (없으면 말고...) 출처 : jusung.github.io/Xcode12-Build-Error/ 참고자료 stackoverflow.com/questions/63607158/xcode-12-building-for-ios-simulator-but-linking-in-object-file-built-for-ios Xcode 12, building for iOS Simulato..

React Native

REACT-NATIVE 안드로이드 웹뷰에서 파일 업로드 카메라 권한 요청

REACT-NATIVE 안드로이드 웹뷰에서 파일 업로드 카메라 권한 요청 android/src/main/java/com/reactnativecommunity/webview/ RNCWebViewModule.java RNCWebViewModule.java 파일 수정 @ReactModule(name = RNCWebViewModule.MODULE_NAME) public class RNCWebViewModule extends ReactContextBaseJavaModule implements ActivityEventListener { private static final int PICKER = 1; private static final int PICKER_LEGACY = 3; private static final..

React Native

REACT-NATIVE 인터넷 연결 확인

어떤 경우에는 앱에서 작업을 시작하기 전에 장치가 인터넷에 연결되어 있는지 확인할 필요가 있을때 Netinfo 라이브러리를 사용하여 확인할 수 있으며 애플리케이션의 React Native 버전에 따라 다릅니다. RN : 버전> = 0.60 import NetInfo from "@react-native-community/netinfo"; NetInfo.fetch().then(state => { console.log("Connection type", state.type); console.log("Is connected?", state.isConnected); }); isConnected: boolean, Type: none, wifi, bluetooth, cellular. RN : 버전 { console.l..

React Native

react-native-webview (웹뷰)에서 카드 결제 또는 외부앱 실행하기

Android 에서 react-native-webview (웹뷰) 카드 결제 또는 외부앱 실행하기 1. react-native-send-intent 라이브러리를 이용해 인텐트 호출 - install npm install react-native-send-intent --save react-native link react-native-send-intent 2. android/setting.gradle 파일에 아래의 코드를 추가 include ':RNSendIntentModule', ':app' project(':RNSendIntentModule').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-send-intent/an..

React Native

REACT NATIVE FIREBASE 및 FCM을 사용하여 IOS 및 ANDROID에서 사용자 지정 푸시 알림 소리를 추가하는 방법

www.embusinessproducts.com/how-to-add-a-custom-push-notification-sound-on-ios-and-android-with-react-native-firebase-and-fcm/ How to add a custom push notification sound on iOS and Android with React Native Firebase and FCM | EMBP I want to document how I got custom push notification sounds working on iOS and Android with the React Native Firebase library and Firebase Cloud Messaging (FCM). The ..

React Native

IOS 14 관련 RN 오류

IOS 14 관련 RN 오류 ios14 push(알림) 퍼미션 해결방안입니다.. firebase모듈을 최신버전으로 업데이트 buildSetting-packaging-productName이 영어를 사용해야 함 (앱이름을 info.plist에서 변경하지 않고 general에서 변경하면 productName이 변경될 수도 있음) ios gif 이미지 반복횟수 오류(최소2번 돌아감) 수정방법입니다. rn 63.2 node_modules/react-native/libraries/image/RCTAnimatedImage.m 파일수정 원본 : if(loopCount!=0) 수정 : if(loopCount!=0 && loopCount!=1) ios 14 외부url 이미지가 나오지 않는 버그 react-native 업그..

projin
'React Native' 카테고리의 글 목록