728x90

FRONT 26

React native Typescript 버튼 클릭 시마다 1씩 증가하는 text를 View에 추가하기

아무리 찾아도 안나오던 것을 chat GPT가 해결해주었다. 사랑해~ 결과: 버튼을 누를 때마다 count가 증가하면서 아래에 newText가 생성되는 것을 알 수 있음 코드 //RecordScreen.tsx(실험하고 싶은 사람들은 App.tsx에 이 코드를 넣으면 될듯) import React from 'react'; import MyComponent from './MyComponent'; const RecordScreen = () => { return ; }; export default RecordScreen; //MyComponent.tsx import React, { useState } from 'react'; import { View, Button, Text } from 'react-native..

[react native] ios 기기 연결

개발자 계정 돈 주고 사야된다는 무시무시한 얘기를 들었는데.. 결론은 apple ID랑 xcode있으면 안 사도 되는듯 1.MAC에다가 8핀 커넥터를 연결한다. 2. React native iOS 실제 iPhone 디바이스에서 실행하기 | cereme.dev React native iOS 실제 iPhone 디바이스에서 실행하기 Mac 장비만 있다면 react-native run-ios로 시뮬레이터 실행은 간단히 해볼 수 있습니다. 하지만 실제 iOS 디바이스에서 실행하기 위해서는 절차가 좀 필요합니다. Apple Developer Program 가입 https://developer.a cereme.dev 요대로 실행 오류 1) 'codesign이 시스템 키체인을 사용하고자 합니다' 에러 해결방법 (vel..

react native typescript에서 navigation 으로 화면 전환 구현하기

typescript형태로 app.tsx가 빌드가 되었어서.. navigation도 그에 따라 기존의 App.js 구현 때와는 다르게 구현해야 했다. https://benjaminwoojang.medium.com/react-navigation-with-typescript-270dfa8d5cad React Navigation with Typescript React Navigation is a library that helps with routing and navigation. benjaminwoojang.medium.com 구현에는 이 글이 가장 많은 도움이 되었다. 왜인지는 모르겠지만 typescript는 javascript와는 달리 navigation.navigate 를 바로 쓸 수 없었고, 각 Stac..

react native 기본 코드 바탕으로 스크롤뷰 초안 만들기

import React from 'react'; import type {PropsWithChildren} from 'react'; import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'; type SectionProps = PropsWithChildren; function Section({children, title}: SectionProps): JSX.Element { return ( {title} {children} ); } function App(): JSX.Element { const backgroundStyle = { backgroundColor: 'darkgray', flex: 1 //전..

아마 개발 1일차.. 실황 정리 (react native accessible / 안드로이드 기기 연결)

안드로이드 talkback, 아이폰 voiceOver기능 구현을 위해 react native에서 만든 모듈이 바로 accessible모듈 https://reactnative.dev/docs/accessibility Accessibility · React Native Create mobile apps accessible to assistive technology with React Native's suite of APIs designed to work with Android and iOS. reactnative.dev 우선 조금의 연구를 해본 결과, mac (노트북) 안에서 개발할 경우 애뮬레이터 안에서 접근성 설정을 바꿀 수 없어서 따로 기기와 mac을 연결시켜야 할 듯 하다. https://velog...

리액트 네이티브 맥 Mac 설치 오류 타파 (23.04.28 기점)

나를 정말 고통스럽게 만들었던 react native 설치 오류... https://kitty-geno.tistory.com/47 React Native | 맥(Mac) 개발 환경 구축 ▶ 리액트 네이티브(React Native)란? 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크로 안드로이드, iOS, 웹, UWP용 애플리케이션을 한 번에 개발하기 위해 많이 사용되고 있다. 「 Home kitty-geno.tistory.com 기본적으로 이런 문서들 따라했는데 계속 안됨. 다 똑같이 하고 xcode까지 맞게 깔았는데 에뮬레이터 실행까진 되는데 react native 화면이 안뜸..;; react native 설치 모든 문서를 찾아봤을 때 공통적으로 깔라고 하는 react native cli의..

react native 이미지 가로배열

import React from 'react'; import { Image, StyleSheet, Button, View, SafeAreaView, ScrollView, StatusBar, Text } from 'react-native'; const Index = () => { return ( GUCCI CUCCI 블랙 10000원 GUCCI CUCCI 핑크 10000원 GUCCI 미키 GUCCI 회색 270000원 GUCCI GUCCI 스페셜 210000원 GUCCI 아구찜1 10000원 GUCCI 아구찜2 10000원 ); }; const styles = StyleSheet.create({ container:{ flex:1, paddingTop:StatusBar.currentHeight, backgr..

react Splash Screen(로딩화면) 구현하기

엄청 간단한거같은데 쉽지가않다.. [React Native] 앱 첫 로딩 실행 화면 (Splash 화면) 구현 (tistory.com) [React Native] 앱 첫 로딩 실행 화면 (Splash 화면) 구현 1. npm 으로 설치 $ npm i react-native-splash-screen --save www.npmjs.com/package/react-native-splash-screen react-native-splash-screen A splash screen for react-native, hide when application loaded.. focus-on-my.tistory.com 내가 참고한곳 딱 이 순서대로하면서 한단계한단계 지나갈때마다 다시 npm run android 해보면서 오..

createDrawerNavigator (react navigation draw)이용해 옆 메뉴 만들기 (+ animated node with id 2 already exists 오류 해결)

결과물 Drawer Navigator | React Navigation https://reactnavigation.org/docs/drawer-navigator/ reactnavigation.org 기본적으로 옆 메뉴를 만드려면 react navigation drawer 모듈을 깔아야하는데 그러기위해선 이것만 깔야아하는게 아님 위 페이지에 나와있는 yarn add @react-navigation/drawer yarn add react-native-gesture-handler react-native-reanimated 이런거 깔아야하는데 이거만 깔았다고 다가 아니라 react-nativation-reanimated는 요구하는게 더 있음. Installation | React Native Reanimated..

728x90