728x90 반응형 SMALL 분류 전체보기155 헤더 만들기 (1) 라이브러리 설치 필요 1) yarn add @react-navigation/native 2) yarn add react-native-screens react-native-safe-area-context + 3) 네이티브 스택 내비게이터 Yarn add @react-navigation/native-stack 안드로이드의 fragments, ios에서의 UINavigationController를 사용해 일반 네이티브 앱과 정확히 동일한 방식으로 화면을 관리한다. 사용법: (App.tsx) import {createNativeStackNavigator} from '@react-navigation/native-stack'; const Stack = createNativeStackNavigator(); /.. 2023. 8. 2. RN 에뮬레이터 실행 (CLI) feat. 안드로이드 스튜디오 1. 기본 설치 -node.js -npm(패키지 관리 도구) -vscode -androidstudio 2. cmd.. npx react-native init 프로젝트 이름 -> 이후 안드로이드 스튜디오 및 vscode에서 프로젝트 열기 및 에뮬레이터 실행 3. vscode와 연결 1) vscode로 해당 프로젝트 폴더를 열어줌 2) 터미널 혹은 cmd 열어서 해당 디렉토리로 이동한 다음 npm start 3) --->이후 + 즉, powershell열어서 다시 해당 디렉토리로 이동 npx react-native run-android +++ 안드로이드 스튜디오 없이 에뮬레이터 띄우기 (환경설정 이후..) https://leirbag.tistory.com/113 --> 참고 1.. 2023. 7. 31. ReactNative - expo cli로 실행하기 (mac) 1. 기본 환경 갖추기 - node.js -- 설치 확인 방법 : 터미널 -> node -v 위 세가지가 설치되어야 함 2 ) git https://velog.io/@chris_seed/Mac-brew-%EC%84%A4%EC%B9%98-%EB%B0%8F-PATH-%EC%84%A4%EC%A0%953 [Mac] brew 설치, 환경 변수 설정, 명령어 Mac을 쓰면서 편하다고 느낀 HomeBrew를 설치하는 방법을 소개한다.HomeBrew는 패키지 관리자(Package Manager)이고, 우리가 필요한 프로그램을 손쉽게 설치하는 프로그램이다.OS 별 패키지 관리자Linux : yum velog.io 3) watchman brew install watchman 입력 4) vscode 설치 5) yarn 설치.. 2023. 7. 31. 네비게이션 바 만들기 TabBar.js import React from 'react'; import { TouchableOpacity, View } from 'react-native'; import { Ionicons, Fontisto } from '@expo/vector-icons'; import { setStatusBarBackgroundColor } from 'expo-status-bar'; //import { getBottomSpace } from 'react-native-iphone-x-helper'; //const bottomSpace = getBottomSpace() // 아이폰의 경우 아래 버튼 스페이스가 필요함 const TabButton = ({ isSelected, onPress, activeIconNam.. 2023. 7. 31. 상단 바 만들기 SafeAreaView : 상단바에서 어느 정도 떨어져서 화면이 보이도록 실행 -> 이거를 라이브러리 이용하는 방법 react-native-iphone-x-helper #Header.js import React from 'react'; import { Text, View } from 'react-native'; import { Ionicons } from '@expo/vector-icons'; // expovectoricon : 아이콘 사이트에서 가져오겠다 const IconButton = (props) => { //아이콘 생성 : 반복해서 사용할 것이니까 컴포넌트화 , props 사요 return ( // paddingHorizontal : 양옆 패딩, 즉 아이콘들 사이의 패딩 ) } const Hea.. 2023. 7. 31. 이전 1 ··· 23 24 25 26 다음 728x90 반응형 LIST
