1. ๊ตฌ์กฐ ๋ฏ์ด ๋ณด๊ธฐ
์ผ๋จ ์ฒ์ ๋ค์ด๋ด์ ์ ํํ๊ฒ๋ ๋ชจ๋ฅด๊ฒ ๊ณ ํฐ ๊ตฌ์กฐ๊ฐ ๋ฌด์์ ์๋ฏธํ๋์ง ๋ฏ์ด ๋ณด๊ฒ ๋ค.
// import์นธ
// import ํ์ํ ๊ตฌ๋ฌธ ๋์ค๋ฉด react๊ฐ ์๋์ผ๋ก import ํด์ค.
// ๊ทผ๋ฐ ๋ด๊ฐ ์๋ชป ์จ์ ์ฝ๊ฐ ์ง์ ๋ค๊ฐ ๋ค์ ํ๋ฉด, ์๋ import ์ ํด์ค. ์ด๊ฑฐ ์กฐ์ฌํ์ 1์๊ฐ ํด๋งธ๋ค.
import { StatusBar } from 'expo-status-bar';
import { Button, Switch } from 'react-native';
import { Image, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
// ๋ณธ๋ฌธ - app์ ๋ด์ฉ
export default function App() {
return (
// 1. View ํ๊ทธ -> ํ๋ฉด์ ๋ณด์ฌ์ง๋ ๋ด์ฉ๋ค
// style = css ๋ด์ฉ๋ค ์ฌ๊ธฐ์๋ class, id ์ ์ฐ๊ณ Styles๋ผ๋ stylesheet ์์ ๋ค ๋ฃ๋๋ค.
// ํ์ ํด๋ ์ ์ํ๋ฏ์ด ๋ด์ฉ ์ฐ๋ฉด ๋๋ค.
<View style={styles.container}>
// 2. text ๊ตฌ๋ฌธ
<Text style={styles.text}>Open up App.js to start working on your app!</Text>
// 3. ์ด๋ฏธ์ง ์
๋ก๋ ๊ตฌ๋ฌธ
// (1) ๋ก์ปฌ ์ด๋ฏธ์ง ์
๋ก๋
<Image source={require("./policeLogo.png")} style={styles.localImage} />
// (2) ์ธ๋ถ ์ด๋ฏธ์ง ๋งํฌ ๋ณต์ฌ ํ ์ฌ์ฉ - stylesheet ์ ๋๋ก ์ ์ฐ๋ฉด ์ ๋ฐ ์ ์๋ค.
<Image
source={{
uri: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjExMjBfMTgy%2FMDAxNjY4OTA4OTExMjg3.TgS1cLIqrQuWYup_mNhr6IjGTld7BoJBSPlT0oQl4pcg.jMIVsOJQPmRuv8parb-j3fVfDNBCSA4j89PJhdvM5_kg.JPEG.ss0407ss%2FIMG_9348.jpg&type=sc960_832"
}} style={styles.uriImage}
/>
// 4. ์ฌ์ฉ์๋ก๋ถํฐ ์ธํ ๋ฐ๊ธฐ
<TextInput placeholder='์ด๋ฆ์ ์
๋ ฅํด์ฃผ์ธ์'/>
// 5. ๋ฒํผ ๋ถ๋ถ onPress์์ ๋๋ค์ ๊ฐ์ ๊ฒฝ์ฐ {} ์ด ๋ถ๋ถ์ด ๋๋ฅด๋ฉด ๋์ค๋ ๋ด์ฉ ๋ด๋น์ด๋ค.
<Button title ="Click Me!" onPress={() => {
console.log("Clicked!");
}} />
// 6. Switch Toggle ๋๋ ๊ฒ
<Switch value ={true}/>
<Switch value ={false}/>
// 7. ScrollView ์์ ๋ฃ์ผ๋ฉด ๋ด์ฉ ๋ง์ ์ Scroll ๋๋ค.
//View ์์ View๋ก์จ Scroll์ด ์๊ธด๋ค.
<ScrollView>
<Image source={require("./policeLogo.png")} style={styles.localImage} />
<Image source={require("./policeLogo.png")} style={styles.localImage} />
<Image source={require("./policeLogo.png")} style={styles.localImage} />
<Image source={require("./policeLogo.png")} style={styles.localImage} />
<Image source={require("./policeLogo.png")} style={styles.localImage} />
<Image source={require("./policeLogo.png")} style={styles.localImage} />
<Image source={require("./policeLogo.png")} style={styles.localImage} />
<Image source={require("./policeLogo.png")} style={styles.localImage} />
</ScrollView>
</View>
);
}
// CSS ๋ฅผ ์ํ ๊ตฌ์ญ.
// Style์ด๋ผ๋ ์์๋ฅผ ๋ง๋ค๊ณ , ์ด ์์๋ StyleSheet๋ผ๋ CSS ์์ญ์ ๋ง๋ค์ด ์ง์ด ๋ฃ์
const styles = StyleSheet.create({
// ** ๊ตฌ์ญ๋ณ๋ก CSS ๋๋ ์ ์ ์.
// style ์์ฑ์ ํตํด ๋งํนํจ.
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 10,
fontWeight: "bold"
},
localImage: {
width: 100,
height: 100,
},
uriImage: {
width:100,
height:100
}
});
0