์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
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 |
- ์ดํญ๊ณ์
- ๊ทธ๋ฆฌ๋
- ๋ฐฑ์ค
- ์น๊ฐ๋ฐ๊ธฐ๋ก
- ChatGPT
- ์ฐ์ ์์ํ
- ์๊ณ ๋ฆฌ์ฆ
- ์ฝ๋ฉํ ์คํธ
- ๊ฐ๋ฐ์
- ๋จ์ํ ์คํธ
- ๋ฐฑ์๋
- boj11653
- spring
- ๋ฐฑ์คํ์ด
- ์ปด๊ณต์
- ํ์ด์ฌ
- ๋ฆฌ์กํธ๋ค์ดํฐ๋ธ
- ์ฝ๋ฉ
- ํ๋ก๊ทธ๋๋ฐ
- ๋ฐฑ์ค1436
- ์น๊ฐ๋ฐ
- ์๋ฃ๊ตฌ์กฐ
- ๋ชจ๋ฐ์ผ์ฑํ๋ก๊ทธ๋๋ฐ
- ๊ทธ๋ฆฌ๋์๊ณ ๋ฆฌ์ฆ
- SSE
- ์คํ๋ง
- ๋ฆฌ์กํธ
- ์ปดํจํฐ๊ณตํ
- ์ปด๊ณต
- ํ๋ก ํธ์ค๋
- Today
- Total
๋ชฉ๋ก๋ชจ๋ฐ์ผ์ฑํ๋ก๊ทธ๋๋ฐ (7)
๐ป๐ญ๐ง๐
FlatList ์ฝ์ด ์ปดํฌ๋ํธ ์ฌ์ฉํ๊ธฐ ๋๊ฐ์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ๋ฌ ๊ฐ ๋ ๋๋งํ ๋๋ FlatList๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์๋๊ฐ ๋น ๋ฅด๋ค. import {FlatList} from 'react-native' keyExtractor ์์ฑ item๊ณผ index ๊ฐ์ด ๋งค๊ฐ๋ณ์์ธ ์ฝ๋ฐฑ ํจ์๋ฅผ ์ง์ ํด renderItem์ ์ค์ ํ ์ฝ๋ฐฑ ํจ์๊ฐ ๋ฐํํ๋ ์ปดํฌ๋ํธ์ key ์์ฑ์ ์ค์ ํ ๊ฐ์ ์ป์ } keyExtractor={(item, index) => item.id} /> โ ํ์ดํ ํจ์๋ ํจ์๋ช ์ด ์์ด๋ ๋จ โ id ๊ฐ์ ์์ฑ์ด ์๋ค๋ฉด index.toString()์ ๋ฐํํด๋ ๋จ ItemSeparatorComponent ์์ฑ ์ด ์์ฑ์ ์ค์ ํ ์ฝ๋ฐฑ ํจ์๊ฐ ๋ฐํํ๋ ์ปดํฌ๋ํธ๋ฅผ ์์ดํ ๊ณผ ์์ดํ ๊ฐ์ ๊ตฌ๋ถ์ ์ญํ ์ ํ๋ ์ปดํฌ๋ํธ..
flex:1 ๊ณผ height: '100%'์ ์ฐจ์ด const styles = StyleSheet.create({ view: { flex: 1, height: '100%', padding: 5, backgroundColor: MD2Colors.lightBlue500, }, text: {fontSize: 20, color: 'white'}, }) flex: 1 โก๏ธ ํ์ ์์์ ๋์ด๊ฐ ๋ฐ์๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ์ ๋์ด์ ์ฌ๋ถ์ ๊ฐ์ ธ์ด height: '100%' โก๏ธ ํ์ ์์์ ๋์ด์ ๋ฌด๊ดํ๊ฒ ๋ถ๋ชจ ์ปดํฌ๋ํธ์ ๋์ด๋ฅผ ๋ชจ๋ ๊ฐ์ ธ์ด โ ๋ฃจํธ view์ Dimensions.get('window').height ์ ๊ฐ์ ๊ฒ flexDirection ์คํ์ผ ์์ฑ ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ๊ณ ์ ์ผ ๋ ์์ ์ปดํฌ๋ํธ๋ฅผ ์์ ์ ์์ญ์ ๋ฐฐ์น..
ImageBackground ์ฝ์ด ์ปดํฌ๋ํธ ์ฌ์ฉํ๊ธฐ import {ImageBackground} from 'react-native' ImageBackground ์ฌ์ฉ๋ฒ
Platform๊ณผ Dimensions API ์คํ OS ํ์ธ import {Platform{ from 'react-native' console.log(Platform.OS) โ ์ฑ์ด ์คํ๋๋ ํฐ์ด ์๋๋ก์ด๋ํฐ์ธ์ง ์๋๋ฉด ์์ดํฐ์ธ์ง๋ฅผ ํ์ธํ๋ค. โ ์์ ์ฝ๋๋ฅผ ์คํํ๋ฉด android ๋๋ ios ๋ผ๊ณ ๊ฒฐ๊ณผ๊ฐ ๋์จ๋ค. Dimension API import {Dimension} from 'react-native' const {width, height} = Dimensions.get('window') โ width, height ๋ ํฐ์ ๊ฐ๋ก๋ก ํ์ ํ๋๋ผ๋ ๋ณํ์ง ์๋๋ค. ๋ทฐ ์ปดํฌ๋ํธ์ backgroundColor ์คํ์ผ ์์ฑ โก๏ธ ์ด๋ฆ์ 'View' ๊ฐ ๋ค์ด๊ฐ ๋ทฐ์ปดํฌ๋ํธ๋ backgroudColor ์คํ์ผ ์..
์คํ์ผ ๊ฐ์ฒด ์ค์ ์์ชฝ ์ค๊ดํธ ๋ถ๋ถ : ๊ฐ์ฒด๋ฅผ ์๋ฏธํ๋ค. ๋ฐ๊นฅ์ชฝ ์ค๊ดํธ ๋ถ๋ถ : JSX ๊ตฌ๋ฌธ์์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์ค์ ํ ๋ ์ฐ๋ ๋ฌธ๋ฒ์ด๋ค. โ ์ปดํฌ๋ํธ์ style ์์ฑ์๋ ๋ฐฐ์ด์ ์ค์ ํ ์ ์๋ค. StyleSheet API import {StyleSheet} from 'react-native' ์คํ์ผ ๊ฐ์ฒด๋ฅผ style ์์ฑ์ ์ค์ ํ๋ ๊ฒ : ์ธ๋ผ์ธ ์คํ์ผ ์ด ์ธ์๋ StyleSheet API๋ฅผ ์ง์ ํด์ ์ฌ์ฉํ ์ ์๋ค. ์คํ์ผ ๊ฐ์ฒด ์์ฑํ๋ ๋ฐฉ๋ฒ : StyleSheet์ create ๋ฉ์๋ ์ฌ์ฉ const styles = StyleSheet.create({ ํค_์ด๋ฆ1: ์คํ์ผ_๊ฐ์ฒด1, ํค_์ด๋ฆ2: ์คํ์ผ_๊ฐ์ฒด2, ... }) ์ธ๋ผ์ธ ์คํ์ผ๊ณผ StyleSheet ์คํ์ผ์ ์ฐจ์ด ์ธ๋ผ์ธ ์คํ์ผ ๋ฐฉ์ : ..

๋ฒํผ์ ๋๋ฅด๋ฉด ๋ํ์์๊ฐ ๋ํ๋๋ ๊ธฐ๋ฅ ๊ตฌํํ๊ธฐ ๋ฒํผ ์ปดํฌ๋ํธ import react from 'react'; import {SafeAreaView, Alert, Button} from 'react-native'; export default function App() { return ( Alert.alert('home pressed.', 'message')} /> ); } Button ์ฝ์ด ์ปดํฌ๋ํธ๋ onPress ์์ฑ์ ์ ๊ณตํ๋ค. โก๏ธ ์ฝ๋ฐฑ ํจ์๋ฅผ ์ง์ ํด์ผ ํจ. ์ฝ๋ฐฑ ํจ์์ ํํ : () => {/* ํจ์ ๋ชธํต */} ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ Alert API (Application Programming Interface) ๋ฅผ ์ ๊ณตํ๋ค. Alert API ๊ฐ ์ ๊ณตํ๋ alert ์ ์ ๋ฉ์๋ : static a..

์ด๋ฒ ๊ธ์์๋ 02-1 ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ ํ๋ ์์ํฌ์ ์๋ ์๋ฆฌ / 02-2 JSX ๊ตฌ๋ฌธ ํ๊ตฌํ๊ธฐ ํํธ๋ฅผ ๊ณต๋ถํด๋ด ๋๋ค ... 1. ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ ํ๋ก์ ํธ ๋ง๋ค๊ธฐ npx react-native init ํ๋ก์ ํธ ๋๋ ํ ๋ฆฌ๋ช --template react-native-template-typescript 2. npm start โป ์ด๋ ์๋ง์ ํ๋ก์ ํธ ๋๋ ํ ๋ฆฌ์์ npm start๋ฅผ ์คํํ์ง ์์ผ๋ฉด ์๋์ ๊ฐ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ ์ ์๋ค. npm ERR! code ENOENT npm ERR! syscall open npm ERR! path /Users/parkseyeon/React-Native/package.json npm ERR! errno -2 npm ERR! enoent Could not read packag..