Hybrid25 리액트 네이티브] 8. flex와 범위 앱을 개발하다보면 Upper Tab과 Bottom Navigation의 크기를 고정하고, 가운데의 Content의 크기를 유동적으로 조절하는 일이 많다. 일단 기본적으로 하듯이 Upper Tab과 Bottom Navigation의 크기를 고정해보자. - ./src/component/Layout.js import React from "react"; import { View, Text, StyleSheet } from "react-native"; export const Header = () => { return ( header ); }; export const Contents = () => { return ( contents ); }; export const Footer = () => { return ( F.. 2022. 12. 14. 리액트 네이티브] 7. 스타일 적용 리액트 네이티브는 JSX로 개발을 한다. 컴포넌트에서 스타일을 적용하는 방법은 크게 두 가지이다. 인라인 방식과 스타일시트에 정의된 스타일을 사용하는 방법이 있다. 1. 인라인 방식 - ../App.js import App from './src/App'; export default App; -../src/App.js import React from "react"; import {View, Text} from "react-native"; const App = () => { return ( Inline style - black Inline style - red ); } export default App; 결과를 보자. 지정된 스타일대로 길이가 길어진 것이 보인다. 그러나 이렇게 개발을 하면 코드가 많아지면 .. 2021. 10. 7. 리액트 네이티브, Github] 한 저장소에 여러개의 리액트 네이티브 프로젝트 커밋하기 한 저장소에 여러개의 리액트 프로젝트를 커밋하면 다음과 같은 오류를 볼 수 있다. hint: You've added another git repository inside your current repository. 이 오류를 무시하고 그냥 커밋하면, 폴더에 화살표가 생기면서 접근이 불가해진다. 이 오류가 왜 생기냐면, 커밋한 하위폴더에 또 git 파일이 생겼기 때문이었다. 이걸 어떻게 처리하냐 먼저, 오류가 난 하위폴더로 접근한다. cd foldername 이후 다음 명령어를 입력한다. rm -rf .git 그럼 .git 파일이 삭제 되는데, 이렇게 끝내는게 아니라, 다시 루트 폴더로 들어와서 남아있는 캐시 파일을 삭제해야한다. cd .. git rm --cached . -rf 이후 정상적으로 add c.. 2021. 10. 6. 리액트 네이티브] 6. 이벤트 리액트 네이티브는 유저 상호작용 이벤트가 많은 편이다. 또한 컴포넌트마다 제공되는 이벤트들도 조금씩 다르다. 그 중 많이 사용되는 이벤트를 본다 1. press press는 웹의 onClick이벤트와 가장 유사한 이벤트이다. Pressable 컴포넌트가 사용할 수 있는 이벤트 종류를 보자. onPress = 터치(Long Press x)시 호출 onPressIn = 터치 시작시 호출 onPressOut = 터치 종료시 호출 onLongPress = 긴 터치 시 호출 로그로 이벤트 호출을 확인해보자. -../component/EventButton.js import React from "react"; import { Pressable,Text } from "react-native"; const EventBu.. 2021. 10. 6. 이전 1 2 3 4 5 6 7 다음 반응형
