728x90
728x90
react-native-webview 설치하기 npm i react-native-webview 간단한 사용 예시 import React from 'react'; import {StyleSheet, View, Text} from 'react-native'; import {WebView} from 'react-native-webview'; const INJECTED_JAVASCRIPT = `(function() { window.ReactNativeWebView.postMessage(JSON.stringify(window.location)); })();`; const runFirst = ` document.body.style.backgroundColor = '#eeddcc'; setTimeout(functio..
라이브러리를 설치한다. npm i react-native-image-picker 🍪 android 권한 설정 android/app/src/main/AndroidManifest.xml 에 추가한다. 🍩 ios 권한 설정 ios/App_이름/info.plist 에 추가한다. NSPhotoLibraryUsageDescription This app requires access to the photo library. NSMicrophoneUsageDescription This app does not require access to the microphone. NSCameraUsageDescription This app requires access to the camera. 또한, 라이브러리 설치 후 pod ins..
React Native에서 애니메이션 효과를 구현하기 위해서는 Animated를 사용한다. 사각형의 View가 이동하는 애니메이션을 만들었다. import React from 'react'; import { Animated, SafeAreaView, View, Text, StyleSheet, Button, } from 'react-native'; function AnimatedTest() { const viewSize = new Animated.ValueXY(0, 0); const handleAnimated = () => { Animated.spring(viewSize, { toValue: {x: 150, y: 350}, useNativeDriver: false, }).start(); }; return ..
리액트 네이티브에서 라우팅을 하기 위해서 다음과 같은 라이브러리를 사용할 수 있다. @react-navigation/native @react-navigation/drawer @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/material-top-tabs @react-navigation/native는 필수로 사용되고, 나머지 네비게이션들은 필요에 따라 설치하여 사용한다. import { NavigationContainer } from '@react-navigation/native'; 네비게이션을 사용하기 위해서 최상단에 선언되야 하며, NavigationContainer 컴포넌트로 감싸진 자식 컴포넌트에서 네비게이션이 동작할 ..
Execution failed for task ':app:checkDebugAarMetadata'. > Could not resolve all files for configuration ':app:debugRuntimeClasspath'. > Failed to transform react-native-0.71.0-rc.0-debug.aar (com.facebook.react:react-native:0.71.0-rc.0) to match attributes {artifactType=android-aar-metadata, com.android.build.api.attributes.BuildTypeAttr=debug, org.gradle.category=library, org.gradle.dependency...
React Native Elements는 React Native의 UI toolkit으로 화면을 구성하는데 도움을 주는 라이브러리이다. 3.4.2 버전을 기준으로 작성하지만, v4에서는 라이브러리 이름이 바뀌는 등 많은 변화가 있었다. import React, { useState } from 'react'; import { Header } from 'react-native-elements'; const ElementsHeader = () => { return ( ); } export default ElementsHeader; Header 컴포넌트는 왼쪽과 가운데, 우측에 추가적으로 컴포넌트를 연결하여 상단에 앱의 헤더 정보를 표시할 수 있게 해준다. import React, { useState } fro..