코드미뇽
미뇽의 잡다 코딩 공부
코드미뇽
전체 방문자
오늘
어제
  • 분류 전체보기
    • 스파르타코딩클럽
    • React-Native
    • 개발일기
    • 사회

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • #스파르타코딩클럽 #스파르톤 #힙한취미 #코딩
  • 나만의꿀팁
  • 스파르타코딩
  • 스파르타코딩클럽
  • 스파르톤
  • 공스타그램

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
코드미뇽

미뇽의 잡다 코딩 공부

[리액트]이미지이용하여 반복채우기 [리액트네이티브]
React-Native

[리액트]이미지이용하여 반복채우기 [리액트네이티브]

2021. 7. 11. 00:32
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
    'React-Native' 카테고리의 다른 글
    • [리액트] flex
    • [리액트]이미지 꽉 채우기 cover
    • [리액트]터치 (TouchableOpacity)
    • [리액트]버튼
    코드미뇽
    코드미뇽

    티스토리툴바