일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 리액트네이티브
- 자바스크립트
- 국비코딩
- 국비IT
- 코딩테스트
- VUE
- ReactNative
- 정보처리기사실기요약
- typescript
- 자스코테
- Java의정석
- php
- 자바스크립트 코딩테스트
- 정보처리기사
- 정보처리기사정리
- 평일코딩
- react
- 정보처리기사실기
- 타입스크립트
- 자바의정석
- 이안의평일코딩
- javascript
- 스프링
- CSS
- 정보처리기사요약
- 오라클
- 리액트
- spring
- Oracle
- 정보처리기사실기정리
- Today
- Total
목록Front-end/ReactNative (5)
이안의 평일코딩
색상 assets/colors라는 폴더를 만들어 colors.js 파일을 생성한다. const colors = { black: '#000000', gray: '#666666', blue: '#1C215D', } export default colors; 자신이 원하는 색상을 넣어주고 export한 다음 import해서 사용하면 간단하게 StyleSheet에서 적용가능하다. import colors from './assets/colors/colors'; const App....... const styles = StyleSheet.create({ sectionTitle: { fontSize: 24, fontWeight: '600', color: colors.blue, fontFamily: 'OpenSans-B..
터미널에서 아래와 같이 입력해준다. npx react-native init 프로젝트명 엔터를 눌려주면 아래와 같이 프로젝트 셋팅이 완료된다.
보통 리액트 네이티브를 첫 입문했을 때 API를 fetch해와서 Movie App을 만들거나 (Pokemon App도 만들긴함 ㅎㅎ) 아니면 CRUD을 첨가한 ToDo App을 만드는데 오늘은 간단하게 To do 앱을 만들어 보도록 하자. 결과물 VScode를 IDE로, Expo CLI를 이용했고 할일을 추가하고 체크하거나 아니면 X 아이콘을 눌려 삭제시키는 간단한 투두앱이다. App.js import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { Text, StyleSheet, View, Dimensions, Platform } from 'react-native'; import uuid fro..
App.js import { StatusBar } from 'expo-status-bar'; import React, {useState} from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; export default function App() { const [OutputText, setOutputText] = useState("Hi there! 👀") function buttonTapped(){ setOutputText("🎉 Welcome to React Native World!") } return ( {OutputText} ); } const styles = StyleSheet.create({ container: { ..