173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크
안녕하세요 시뮬레이터 실습하고 있는 수강생입니다. 아래 사진처럼 시뮬레이터로 사파리에 접속하면 맥북의 사파리 인스펙터에서 시뮬레이터 속 웹을 인지하는데요, 엑스포 앱을 통해 웹뷰 내부의 웹은 읽지 못하는 것 같아요 따로 설정해야하는 것이 있을까요 ?
미해결
따라하며 배우는 리액트 네이티브 기초
getStatusBarHeight의 값이 콘솔에 찍히는데 그 값이 화면에 적용되지 않습니다. import { View, StyleSheet, StatusBar, Image, Text, TouchableOpacity, Animated, Platform, } from 'react-native'; import {getStatusBarHeight} from 'react-native-status-bar-height'; import React, {useEffect, useRef} from 'react'; import {SafeAreaView} from 'react-native-safe-area-context'; import Ionic from 'react-native-vector-icons/Ionicons'; const Status = ({route, navigation}) => { const {name, image} = route.params; const statusBarHeight = getStatusBarHeight(); const topMargin = Platform.OS === 'ios' ? statusBarHeight : 0; console.log('statusBarHeight', statusBarHeight); console.log('topMargin', topMargin); // Animated.Value(0)의 값을 직접 변경하면 안되기 때문에 useRef를 사용 const progress = useRef(new Animated.Value(0)).current; const progressAnimation = progress.interpolate({ inputRange: [0, 5], outputRange: ['0%', '100%'], }); useEffect(() => { Animated.timing(progress, { toValue: 5, duration: 5000, useNativeDriver: false, }).start(); }); useEffect(() => { let timer = setTimeout(() => { navigation.goBack(); }, 5000); return () => { clearTimeout(timer); }; }); return ( <SafeAreaView style={styles.statusContainer}> <StatusBar barStyle="light-content" backgroundColor="black" /> <View style={[styles.topGreyLineContatiner, {top: 18 + topMargin}]}> <Animated.View style={{ backgroundColor: 'white', height: '100%', width: progressAnimation, }} /> </View> <View style={[styles.headerContainer, {top: 12 + topMargin}]}> {* ... /*} </View> <Image style={styles.storyImage} source={image} /> </SafeAreaView> ); }; export default Status; const styles = StyleSheet.create({ statusContainer: { backgroundColor: 'black', height: '100%', justifyContent: 'center', }, topGreyLineContatiner: { height: 3, width: '95%', borderWidth: 1, backgroundColor: 'grey', position: 'absolute', }, headerContainer: { padding: 15, flexDirection: 'row', alignItems: 'center', position: 'absolute', top: 12, left: 0, width: '90%', }, headerImageContainer: { width: 30, height: 30, justifyContent: 'center', alignItems: 'center', }, //.... }); console.log('statusBarHeight', statusBarHeight); console.log('topMargin', topMargin); 이렇게 했을경우 statusBarHeight 20 , topMargin 20값이 모두 정상적으로 디버깅 툴에 출력됩니다. 그러나 화면상에 ui에 적용되지 않아요. 일부로 const 에 넣어서 사용해봤고, margintTop과 top이 같이 있을경우 가끔 문제가 된다는 글을 봐서 아예 top에 값을 따로 추가하는 방식도 해보았습니다. 그리고 마지막으로 예제 코드를 그대로 가져와서 사용해보았지만 여전히 화면에서 적용이 되지 않습니다. 값이 찍히는 걸 보면 getStatusBarHeight가 동작하긴 하는건데 화면상에서 적용이 안되는 이유가 뭔지 알 수 있을까요?
미해결
react-native 프로젝트 개발중인데, android studio 애뮬레이터에서 expo go로 실행시켰을 때는 제대로 동작하는데 eas build를 통해 apk 파일로 만들어서 실제 기기 혹은 android studio 애뮬레이터에서 다운 받아서 실행만 하면 TypeError: Cannot read property 'bubblingEventTypes' of null 에러가 뜹니다. stack overflow나 github 커뮤니티에 있는 방법들 모두 해봤는데 소용이 없었습니다. 제발 도움주시면 감사하겠습니다. 더 필요한 정보 있으시면 제공해드리겠습니다. "dependencies": { "@gorhom/bottom-sheet": "^5.1.1", "@react-native-async-storage/async-storage": "1.23.1", "@react-navigation/bottom-tabs": "^7.2.1", "@react-navigation/native": "^7.0.15", "@react-navigation/stack": "^7.1.2", "@supabase/supabase-js": "^2.49.1", "@tanstack/react-query": "^5.40.0", "base64-arraybuffer": "^1.0.2", "buffer": "^6.0.3", "expo": "^52.0.41", "expo-auth-session": "^6.0.3", "expo-clipboard": "~7.0.1", "expo-constants": "^17.0.8", "expo-image-picker": "^16.0.6", "expo-linking": "^7.0.5", "expo-location": "^18.0.8", "expo-status-bar": "~2.0.1", "expo-updates": "~0.27.4", "npm": "^11.1.0", "react": "18.3.1", "react-hook-form": "^7.54.2", "react-native": "0.76.7", "react-native-geocoding": "^0.5.0", "react-native-gesture-handler": "^2.20.2", "react-native-get-random-values": "^1.11.0", "react-native-image-zoom-viewer": "^3.0.1", "react-native-maps": "^1.18.0", "react-native-reanimated": "^3.16.7", "react-native-url-polyfill": "^2.0.0", "zustand": "^5.0.3" }, "devDependencies": { "@babel/core": "^7.25.2", "@babel/plugin-transform-class-properties": "^7.25.9", "@babel/plugin-transform-private-methods": "^7.25.9", "@babel/plugin-transform-private-property-in-object": "^7.25.9", "@types/react": "~18.3.12", "@types/react-native-vector-icons": "^6.4.18", "metro-react-native-babel-preset": "^0.77.0", "react-native-dotenv": "^3.4.11", "typescript": "^5.3.3" }, "private": true } android studio 로그캣에서 아래와 같이 뜨고 앱이 꺼집니다. com.facebook.react.common.JavascriptException: TypeError: Cannot read property 'bubblingEventTypes' of null This error is located at: in RNSScreen in Unknown in Suspender in Suspense in Freeze in DelayedFreeze in InnerScreen in Unknown in MaybeScreen in RNSScreenContainer in ScreenContainer in MaybeScreenContainer in RCTView in Unknown in CardStack in RNCSafeAreaProvider in SafeAreaProvider in SafeAreaProviderCompat in RNGestureHandlerRootView in GestureHandlerRootView in StackView in PreventRemoveProvider in NavigationContent in Unknown in StackNavigator in AuthNavigator in ThemeProvider in EnsureSingleNavigator in BaseNavigationContainer in NavigationContainerInner in _QueryClientProvider in RNGestureHandlerRootView in GestureHandlerRootView in RCTView in Unknown in App in RCTView in Unknown in AppContainer, stack:
미해결
배달앱 클론코딩 [with React Native]
안녕하세요 제로쵸님 리액트 네이티브로 이번에 처음으로 앱을 개발해서 출시를 했습니다. 그런데 도저히 해결이 안되는 문제가 있어서 질문을 남깁니다! import * as Application from "expo-application"; export const getUserAppVersion = () => { return Application.nativeApplicationVersion ?? null; }; 안드로이드에서 앱버전을 가져오는 곳에서 에러가 생기고 있는데... 개발 과정에선 expo go 앱의 버전이 뜸 (정상) 프로덕션 배포 IOS의 경우 앱의 버전이 정상적으로 뜸 (정상) 내부 앱공유로 배포한 안드로이드의 경우 앱의 버전이 정상적으로 뜸 (정상) 프로덕션 배포 안드로이드의 경우 앱 버전이 안뜸 (문제) 참고로 버전은 아래와 같습니다. "react-native": "0.76.7" "expo": "~52.0.31" 혹시 이런 이슈의 원인이 짐작가시나요? ㅜㅜ 빌드까지 해서 테스팅 했을 때도 문제가 없었는데 프로덕션 배포 후에 정상적으로 작동을 안하니 어떻게 디버깅을 해야할지도 너무 난감하더군요...
미해결
따라하며 배우는 리액트 네이티브 기초
Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager. 이런 오류가 나. 아마 호환성문제인거 같은데 어떻게 해결해?
미해결
따라하며 배우는 리액트 네이티브 기초
안녕하세요, 인프런 AI 인턴입니다. 장우진님, 리액트 네이티브로 웹앱을 구현한 후에 구글 로그인 기능을 추가하고자 하신다면 파이어베이스를 통해 이 기능을 제공할 수 있습니다. 파이어베이스는 웹과 모바일 애플리케이션 모두를 지원하는 강력한 플랫폼입니다. 리액트 네이티브에서는 파이어베이스의 Authentication 모듈을 사용하여 쉽게 구글 로그인 기능을 구현할 수 있습니다. 과정은 일반적으로 다음과 같습니다: 1. 파이어베이스 콘솔에서 해당 프로젝트에 구글 로그인 기능을 활성화합니다. 2. 리액트 네이티브 앱에 필요한 파이어베이스 SDK를 설치하고 구성합니다. 3. 파이어베이스 Authentication 모듈을 사용하여 구글 로그인 기능을 구현합니다. 구글 로그인 기능은 웹앱에서 구현 가능하며, 리액트 네이티브에도 동일하게 적용할 수 있다는 점에서 효율적인 개발이 가능합니다. 구체적인 코드 및 구현 방법은 다음의 문서를 참조해 보세요: - 파이어베이스 웹으로 구글 로그인 구현하기 프로젝트의 구체적인 요구 사항에 따라 추가적인 설정이나 코드가 필요할 수도 있습니다. 따라서 더 자세한 구현 방법은 위의 공식 문서나 관련 블로그 글을 참고하시길 바랍니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다. 이런 너의 대답은 알겠어! 그런데 내가 궁금한거는 강의에서는 파이어베이스 프로젝트를 만들때 웹 애플리케이션으로 만들어서 진행했는데 구글 로그인 환경도 웹 애플리케이션으로 진행할 수 있는지 물어보는거야! 아니면 안드로이드 환경으로 프로젝트를 다시 만들어야해? reactnative야!
미해결
따라하며 배우는 리액트 네이티브 기초
우리는 파이어베이스 웹앱으로 연결해서 진행하는데 구글 로그인 기능 추가하려면 웹앱으로 해도돼??
미해결
따라하며 배우는 리액트 네이티브 기초
파이어 베이스 11로 했을때 똑같이 실행했을때 , getAuth를 인식을 못합니다. 찾아보니까 9버전부터 하나하나 import해야한다는데 맞나요 ?
미해결
따라하며 배우는 리액트 네이티브 기초
다른 학습들은 도표에 docs 가 연결되어있는데 마지막 redux 프로젝트는 빠져있어요.
미해결
따라하며 배우는 리액트 네이티브 기초
import { Pressable, StyleSheet, Text, View } from 'react-native' import React from 'react' import CheckboxUnChecked from '../assets/checkbox-unchecked.svg'; import CheckboxChecked from '../assets/checkbox-checked.svg'; import DeleteIcon from '../assets/delete.svg'; const TodoItem = () => { return ( <View style={styles.itemContainer}> <Pressable hitSlop={10} style={styles.itemTextChecked} > <CheckboxUnChecked /> <CheckboxChecked style={styles.itemCheckboxCheckedIcon}/> </Pressable> <Text style={[styles.itemText, styles.itemTextChecked]} > 코딩하기 </Text> <Pressable style={[ styles.deleteButton, styles.deleteButtonDone ]} hitSlop={10} > <DeleteIcon /> </Pressable> <Text>TodoItem</Text> </View> ) } export default TodoItem const styles = StyleSheet.create({} ) 내가 보낸 이미지 보면 글자가 짤려 왜그런거야? 선생님이 하란대로 했고 14.1로 인스톨해서 에러도 안났어. 그런데 인스톨 하고나서 보니까 글자가 잘리더라고 왜그런거같아? import { SafeAreaView, StyleSheet, Text, View } from 'react-native' import React from 'react' import { StatusBar } from 'expo-status-bar' import { Platform } from 'react-native'; import InputForm from '../components/InputForm' // 대소문자 정확히 일치 import TodoItem from '../components/TodoItem'; const MainScreen = () => { return ( <SafeAreaView style={styles.container}> <StatusBar backgroundColor={'default'} /> <Text style={styles.pageTitle}>ToDo App</Text> <View style={styles.listView}> <Text style={styles.listTitle}>할일</Text> <TodoItem /> </View> <View style={styles.separator} /> <View style={styles.listView}> <Text style={styles.listTitle}>완료된 일</Text> </View> <InputForm/> </SafeAreaView> ) } export default MainScreen const styles = StyleSheet.create({ container: { flex: 1, paddingTop: Platform.OS === 'android' ? 20 : 0, backgroundColor: '#f7f8fa' }, pageTitle: { marginBottom: 35, paddingHorizontal: 15, fontSize: 54, fontWeight: '600' }, separator:{ marginHorizontal: 10, marginTop : 25, marginBottom : 10, borderBottomWidth: 1, borderBottomColor: 'rgba(0,0,0,0.2)', }, listView: { flex: 1, }, listTitle: { marginBottom: 25, paddingHorizontal: 15, fontSize: 41, fontWeight: '500' } }) 이게 mainscreen이야. 알려줄수있어??
미해결
따라하며 배우는 리액트 네이티브 기초
pressable 자동으로 import되는데 어떻게 하는건가요?
미해결
따라하며 배우는 리액트 네이티브 기초
react native cli로 개발할때 mac에서는ios,and 2가지가 있는데 윈도우에서는 android만 되는건가요? ios는 안되는건가요?
미해결
따라하며 배우는 리액트 네이티브 기초
안드로이드 스튜디오에서 시뮬레이터를 실행시키면 cpu와 메모리가 거의 100%프로에서 안떨어지려고 하는데 이거 낮추는 방법 없을까요..?
미해결
따라하며 배우는 리액트 네이티브 기초
강의에서 <android:exported="false"> 부분 이후 안드로이드 실행시 Execution failed for task ':app:checkDebugDuplicateClasses'. 오류가 나면 gradle.properties 파일에 아래 부분을 추가해보세요 android.useAndroidX=true android.enableJetifier=true
미해결
따라하며 배우는 리액트 네이티브 기초
선생님 이다음 remote push 부분 강의가 없습니다. 누락된걸까요?
미해결
따라하며 배우는 리액트 네이티브 기초
선생님 expo로 Aos 실행했을때 Check the render method of SceneView . 오류가 납니다. React Navigation 기능을 안쓰고 했을때는 오류가 안나는데 어떻게 해결하나요?
미해결
따라하며 배우는 리액트 네이티브 기초
안녕하세요. 진도가 100% 완료가 안됩니다. 첨부드린 것처럼 마지막 강의가 . 으로 되어 있고 눌러봐도 영상 나오는 것도 없고 강의가 진행되는게 없습니다. 마지막 강의 완료가 안되서 진도율이 98%에서 멈춰있고 100%가 안되는거 같은데 확인 부탁드립니다. 다른 강의는 모두 수강했습니다.
해결됨
따라하며 배우는 리액트 네이티브 기초
안녕하세요. 모두 수강했는데 진행도가 100% 안찍히는데 원인을 알수있을까요? 혹시 마지막 강의 "." 제목으로 된것 떄문인가요? 이거 어떻게 수강 체크하는지 알수있을까요??
미해결
따라하며 배우는 리액트 네이티브 기초
깃헙에 올리셨다면 링크 공유해주실수 있나요?
미해결
따라하며 배우는 리액트 네이티브 기초
expo 환경설정중에 궁금한 점이 생겨 문의드립니다. 강의에 나온데로 그대로 설치를 했는데 파일이 구성이 달라 문의드립니다. 영상에서는 app.js 파일이 있는데 저의 파일안에는 app.js 파일이 없습니다... 구성도 많이 다른것 같습니다. 어떤 원인에서 이러한 결과가 나오게 되었는지 궁금합니다. 감사합니다.
