728x90
728x90
React Navigation은 대표적인 React Native의 라우팅 라이브러리이다. 모바일 환경의 라우팅을 구현하다보면, 중첩으로 구성된 라우팅이 필요한 경우가 많다. 예를들어, 탭으로 구성된 앱이 있을 때 탭 내부에서 스택으로 라우팅이 필요한 경우가 있다. 많은 경우 탭 내부에서 상세 페이지가 필요한 경우가 있기에 이런 경우에는 탭 위에 스택이 쌓여있는 구조가 된다. 공식 문서를 참고하여 이를 구현하면 다음과 같다. import React from 'react'; import {View, Text} from 'react-native'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {createStack..
노드에는 기본적으로 crypto, path, url, assert 등의 라이브러리가 내장으로 제공된다.리액트에서도 이를 사용하기 위해서 웹팩 설정을 변경하는 등의 추가적인 설정이 필요했는데, 리액트 네이티브에서도 그렇다.이를 간단하게 설정할 수 있게 해주는 라이브러리가 있는데, rn-nodeify이다.이번엔 rn-nodeify의 사용법에 대해서 기록하고자 한다.npm i rn-nodeify설치가 끝나면, package.json의 script에 postinstall을 작성한다."postinstall": "rn-nodeify --install fs,crypto,url,assert --hack"위의 명령어를 통해서 자동으로 기입된 라이브러리를 설치할 수 있다.위에서는 crypto, url, assert만 사용..
React Native는 이제 타입스크립트를 사용하는 것이 기본 옵션이 되었다. 그에 따라서, 나 역시 타입스크립트를 사용하는데 react navigation의 타입스크립트 설정이 유난히 번거로웠다. 그래서 다음번의 번거로움을 줄이고자, 내가 사용해본 react navigation의 타입스크립트 설정을 기록으로 남겨두기로 했다. 🍖 코드들은 stack navigator를 기준으로 설명한다. import {createNativeStackNavigator} from '@react-navigation/native-stack'; import {Setting, Home, Login} from "./components"; export type RootStackParamList = { Login: undefined;..
StyleSheet StyleSheet은 react native에서 기본적으로 제공되는 CSS 작성법이다. import React from 'react'; import {View, Text, StyleSheet} from 'react-native'; const Home = () => { return ( Hello World ) } const styles = StyleSheet.create({ container: { flex: 1, padding: 12, backgroundColor: 'gray', }, innerText: { fontSize: 30, }, textColor: { color: "red", } }); export default Home; StyleSheet.create를 통해서 객체를 생성하..
ethers를 비롯하여 필요한 라이브러리를 설치한다. npm i ethers @ethersproject/shims react-native-get-random-values 타입스크립트를 사용할 때 npm i ethers @ethersproject/shims react-native-get-random-values @types/react-native-get-random-values import React, {useState} from 'react'; import {Button, SafeAreaView, Text, View} from 'react-native'; import 'react-native-get-random-values'; import '@ethersproject/shims'; import {ethe..