React Native
-
스택 네비게이션의 특정 화면에서 탭 네비게이션을 숨기는 방법개인 공부/React Native 2021. 7. 17. 02:09
예시) import { getFocusedRouteNameFromRoute } from "@react-navigation/native"; const ProfileStack = createStackNavigator(); const ProfileNavigator = ({ navigation, route }) => { React.useLayoutEffect(() => { const routeName = getFocusedRouteNameFromRoute(route); if (routeName === "Group") { navigation.setOptions({ tabBarVisible: false }); } else { navigation.setOptions({ tabBarVisible: true }); } ..
-
vector-icons : 리액트 네이티브에서 벡터 아이콘 사용하기개인 공부/React Native 2021. 7. 10. 20:45
import { MaterialCommunityIcons } from '@expo/vector-icons'; vector-icons는 Expo 프로젝트에서 기본으로 설치되는 라이브러리이며 위와 같이 import 해서 사용한다. 이외에도 react-native-vector-icons 라이브러리를 설치하여 벡터 아이콘을 사용할 수도 있다. vector-icons 에서 제공하는 아이콘 목록 @expo/vector-icons directory icons.expo.fyi react-native-vector-icons 공식 깃허브 oblador/react-native-vector-icons Customizable Icons for React Native with support for image source and ..
-
리액트 네이티브를 위한 자바스크립트 문법 정리개인 공부/React Native 2021. 3. 27. 21:30
리액트 네이티브를 공부하면서 보이는 낯선 자바스크립트 문법들을 정리하려고 한다. 계속 추가할 예정! 1. Object.values() 파라미터로 받은 객체가 가진 속성의 값들로 이루어진 배열을 리턴한다. for...in과 동일한 순서를 갖는다. const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.values(object1)); // expected output: Array ["somestring", 42, false]결과 : > Array ["somestring", 42, false]
-
처음 배우는 리액트 네이티브 : 6장 Hooks개인 공부/React Native 2021. 3. 27. 21:22
Hooks는 리액트 16.8 버전에서 새롭게 추가된 기능으로, 리액트 네이티브 0.59 버전부터 사용할 수 있다. 이전에는 컴포넌트 상태 관리나 생명 주기에 따른 특정 작업 수행을 위해 클래스형 컴포넌트를 사용해야 했지만 Hooks 덕분에 함수형 컴포넌트에서도 가능하게 되었다. 1. useState const [state, setState] = useState(initialState);useState 함수를 호출하면 파라미터로 전달한 값을 초깃값으로 갖는 상태 변수와 그 변수를 수정할 수 있는 세터 함수를 배열로 반환한다. 관리해야 하는 상태의 수만큼 여러 번 사용할 수 있다. 상태를 관리하는 변수는 반드시 세터 함수를 이용해 값으 ㄹ변경해야 하고, 상태가 변경되면 컴포넌트가 변경된 내용을 반영하여 다시..
-
처음 배우는 리액트 네이티브 : 4장 정리개인 공부/React Native 2021. 3. 17. 20:55
1. 스타일링 리액트 네이티브에서의 스타일링은 CSS와 약간의 차이가 있다. 리액트 네이티브에서는 자바스크립트를 이용해 스타일링할 수 있다. 컴포넌트에는 style 속성이 있고, 이 속성에 인라인 스타일을 적용하는 방법과 StyleSheet에 정의된 스타일을 사용하는 방법이 있다. 1) 인라인 스타일링 HTML의 인라인 스타일링처럼 컴포넌트에 직접 스타일을 입력하는 방식. 단, 객체 형태로 입력해야 한다. 2) 클래스 스타일링 스타일시트에 정의된 스타일을 사용하는 방법. 3) 여러 개의 스타일 적용 여러 개의 스타일을 적용해야 할 때는 배열을 이용하여 style 속성에서 적용한다. 이때 뒤에 오는 스타일이 앞에 있는 스타일을 덮는다는 것에 주의해야 한다. 클래스 스타일뿐만 아니라 인라인 스타일을 혼용해서..
-
처음 배우는 리액트 네이티브 : 1장~3장 정리개인 공부/React Native 2021. 3. 10. 23:59
1장 리액트 네이티브는 2015년 3월 페이스북에 의해 공개된 오픈소스 프로젝트로, 리액트에 기반을 두고 제작되었다. 하지만 리액트와 달리 iOS, 안드로이드에서 동작하는 네이티브 모바일 애플리케이션을 만드는 자바스크립트 프레임워크이다. 장점 코드 대부분이 플랫폼 간 공유가 가능하여 iOS와 안드로이드 개발을 동시에 할 수 있다. 패스트 리프레쉬 기능을 제공하여 즉각적으로 변경된 모습을 확인할 수 있다. 각 플랫폼에서 그에 알맞은 네이티브 엘리먼트로 전환되기 때문에 큰 성능 저하 없이 개발이 가능하다. 단점 네이티브의 새로운 기능을 사용하는 데 오래 걸린다. 유지보수가 어렵다. 업데이트가 잦다. 동작 방식 브릿지 : 자바스크립트 코드를 이용해 네이티브 계층과 통신할 수 있게 연결하는 역할을 한다. 가상 ..