전체 글 (24) 썸네일형 리스트형 StyleSheet 자주 사용하는 스타일 속성 import React from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; export default function App() { return ( 스파르타 코딩클럽!! ); } const styles = StyleSheet.create({ container: { //영역을 잡는 속성입니다. 따로 자세히 다룹니다. //flex: 1은 전체 화면을 가져간다는 뜻입니다 flex: 1, //영역의 배경 색을 결정합니다 backgroundColor: '#fff', //아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다. //flex를 자세히 다룰때 같이 자세히 다룹니다 justifyContent:".. Image(외부) import React from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; //이렇게 상단에 가져와 사용할 이미지를 불러옵니다 import favicon from "./assets/favicon.png" export default function App() { return ( {/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */} ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', //혹시 미리 궁금하신 분들을 위해 언급하자면, //justifyContent와 alignContent는 영역 안에 있는 .. Image(assets) import React from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; //이렇게 상단에 가져와 사용할 이미지를 불러옵니다 import favicon from "./assets/favicon.png" ** "./assets/favicon.png" 이거는 상대주소 export default function App() { return ( {/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */} ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', //혹시 미리 궁금하신 분들을 위해 언급하자면, //just.. react-native SafeAreaView [react-native 태그] SafeAreaView ScrollView-2 import React from 'react'; import { StyleSheet, Text, View, ScrollView } from 'react-native'; export default function App() { return ( 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, textContainer: { height:100, bord.. ScrollView-1 import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( //각 태그들에는 style이라는 속성을 갖습니다. //이 속성은 파일 최하단에 작성한 스타일 코드 객체의 키 값을 부여해 // 엘리먼트들에 스타일을 줄 수 있습니다. //이는 JSX문법을 배우고 난 다음 더 자세히 다룹니다. {/* //보인 영역을 갖는 엘리먼트 7가 반복적으로 쓰였습니다. */} 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히 갖는 텍스트 입니다! 영역을 충분히.. Text import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! 문자는 Text 태그 사이에 작성!! ); } const styles = StyleSheet.create({ cont.. View 화면의 영역을 나타내는 태그 import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, subContainerOne: { flex:1, backgroundColor:"yellow" }, subContainerTwo: { flex:1, backgroundColor:"green" } }); 이전 1 2 3 다음
