div
์ ๊ฐ์ ํ๊ทธ ์ฌ์ฉ ๋ถ๊ฐ๋ฅ (์น์ด ์๋๊ธฐ ๋๋ฌธ โ๏ธ)-> ๐ก View
์ฌ์ฉ
import { View } from 'react-native';
+) ํน์ ์ญํ ์ ํ์ง ์๊ณ ์ฌ๋ฌ๊ฐ์ ์ปดํฌ๋ํธ ๋ฐํ -> Fragment
์ฌ์ฉ
import { Fragment } from 'react';
// <Fragment></Fragment> == <></>
Text
ํ๊ทธ ์์ ๋ค์ด๊ฐ์ผํจimport { Text } from 'react-native';
...
<Text>Hello</Text>
style
์ผ๋ถ ์ฌ์ฉ ๋ถ๊ฐex) border ์ฌ์ฉ โ
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
border: '1px', //err
},
StyleSheet.create
(์คํ์ผ ์ปดํฌ๋ํธํ, ์๋์์ฑ ๊ธฐ๋ฅ ์ ๊ณต)
// StyleSheet.create version
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
// ๋จ์ ์ปดํฌ๋ํธํ (์๋์์ฑ ์ฌ์ฉ ๋ถ๊ฐ)
const styles = {
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
};
StatusBar
์๊ณ, ๋ฐฐํฐ๋ฆฌ, ์์ดํ์ด ๋ฑ์ ์๋ฏธํ๋ค.
-> react์๋ ๋ฌ๋ฆฌ return๋ฌธ ์์ ์ผ๋ถ ์ปดํฌ๋ํธ ํ๋ฉด์ ํ์ โ
(๋จ์ํ ์ด์์ฒด์ ์ ์ํตํ๊ธฐ ์ํ ์ฅ์น)
import { StatusBar } from 'expo-status-bar';
...
<StatusBar style="auto" />
react native๊ฐ ์ ๊ณตํ๋ package๋ณด๋ค ๋ ์ธ๋ถ์ ์ธ ๊ธฐ๋ฅ ์ ๊ณต (ex. Async Storage)
React Native Directory -> โ ๏ธ ์ ์์๊ฐ ๋ฒ๊ทธ ๊ณ ์น ๋๊น์ง ๊ธฐ๋ค๋ ค์ผํจ
sol) -> โจ Expo SDK : Expoํ์ด ๋ง๋ API, component ๋ชจ์