1) 폰트 파일 준비먼저, 사용할 폰트 파일(예: .ttf 또는 .otf)을 프로젝트에 추가한다. assets/fonts 폴더를 만들고 그 안에 폰트 파일을 넣는게 일반적이다.2) expo-font 패키지 설치expo install expo-font3) 사용하는 폰트 선언export default function App() { const [fontsLoaded] = useFonts({ JUA: require('./assets/fonts/BMJUA_otf.otf'), });}const styles = StyleSheet.create({ fonts: { fontFamily: 'JUA', }});이런식으로 사용하면 된다.
분류 전체보기
1) react-native-dotenv 설치npm install react-native-dotenv----yarn add react-native-dotenv2) Babel 설정 파일 업데이트babel.config.js를 다음과 같이 수정module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], plugins: [ [ 'module:react-native-dotenv', { moduleName: '@env', path: '.env', blocklist: null, allowlist: nul..
React-Native로 날씨 앱을 만들던 도중 openweather의 API를 사용하여 만들려고 했지만, 원하는 정보가 무료버전이라 제대로 제공되지 않는 문제로 해당과정을 어떻게 하면 해결할까 하여 기상청 API를 대신하여 이용하기로 결정공공 데이터 포털에 접속 → 회원가입, 활용신청공공데이터 포털활용신청하는 방법은 간단하니 다음으로 바로 넘어가면기상청_단기예보 ((구)_동네예보) 조회서비스 를 이용하면 된다.해당 API 에는 총 4가지의 서비스를 이용할 수 있는데초단기실황조회초단기예보조회단기예보조회예보버전조회이중에서 초단기 실황조회를 이용하여 현재 온도를 가지고 와보자.http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtNcstAP..
React-Native 하면서 생겼던 글로 쓰기에 애매하지만 간단하게 필요했던 것들을 정리해본다.Ios Simulator 끄는법다음사진과 같이 ios simulator 를 사용중에 컴퓨터를 종료하려고 했는데 ios simulator가 켜져있어서 종료가 안된적이 있다.이럴데 'command + Q' 를 누르게 되면 정상적으로 종료가된다.Expo 앱에서 Debugger 열기Expo 앱에서 Debugger 를 열기 위해서 다음과 같은 창을 띄우려면, 앱에 설치하는 경우 핸드폰을 흔들면 나오지만 Ios Simulator에서는 흔들수 없기에 이럴 때는 'Command + D' 를 눌러주면 된다. Ios Simulator 에서 custom loaction 설정해주기앱을 만들던 도중에 gps를 내위치를 기반으로 날..
React-Native에서 위치에 관한 기능을 사용하기 위해 Expo를 사용해보자https://docs.expo.dev/versions/latest/sdk/location/위의 docs 주소 참고하자expo-location 설치npx expo install expo-location우선 expo-location 을 설치해주자Location import 시키기import * as Location from 'expo-location';핸드폰으로 부터 허가 받기전체 코드는 아래와 같다.useEffect(() => { LocationFunc();}, []);const LocationFunc = async () => { // 1. requestForegroundPermissionsAsync() 허가 받는..
React-Native View 컴포넌트에 대해 알아보기React-Native 는 거의 대부분을 너비와 높이에 기반해서 레이아웃을 디자인 하지 않는다.⇒ width , height를 거의 사용하지 않는다는 뜻이다.스크린의 크기에 따라 보이는게 천차만별이기 때문이다.반응형 디자인에 대해 생각해야된다. 수많은 스크린들을 고려하면서 디자인 해야될것!아이콘이나 아바타는 width 나 height 를 사용할 수 있지만 레이아웃에서는 사용하지 않는다.View 기본적으로 flex 속성을 가지고 있다. 일반적으로 웹에서는 display : flex 를 하고 flex-direction: row; 를 하는 속성을 넣어줘야 되지만 React-Native View 는 기본적으로 flex 속성을 가지고 있다.그리고 React..
