import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
//이렇게 상단에 가져와 사용할 이미지를 불러옵니다
import favicon from "./assets/favicon.png"
export default function App() {
return (
<View style={styles.container}>
{/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */}
<Image
source={favicon}
// 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
resizeMode={"repeat"}
style={styles.imageStyle}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
//혹시 미리 궁금하신 분들을 위해 언급하자면,
//justifyContent와 alignContent는 영역 안에 있는 콘텐츠들을 정렬합니다
justifyContent:"center",
alignContent:"center"
},
imageStyle: {
width:"100%",
height:"100%",
alignItems:"center",
justifyContent:"center"
}
});
asset 폴더 / favicon
resizeMode={"repeat"} <- 반복하기 repeat
'React-Native' 카테고리의 다른 글
[리액트] flex (0) | 2021.07.11 |
---|---|
[리액트]이미지 꽉 채우기 cover (0) | 2021.07.11 |
[리액트]터치 (TouchableOpacity) (0) | 2021.07.11 |
[리액트]버튼 (0) | 2021.07.11 |
[리액트]스크롤뷰 app.js (0) | 2021.07.11 |