HybridApp-React Native 2세대 (Image)

<최종 화면>

이미지를 클릭 할 때마다, 이미지가 바뀐다.

이미지가 많아지면 밑으로 배치되어 볼 수가 없다. 스크롤뷰 안에 넣어서 스크롤로 볼 수 있다.

백그라운드 배경을 주는 속성이 따로 없다. <ImageBackground>태그를 이용하자.

---

실행 전에 AVD를 실행해 놓자.

예제는 d:\HybridApp\ReactNative폴더에 만들 것이다 해당 경로까지 접속 후 init하자.

MainComponent.js를 만들자.

MainComponent.js가 화면에 보이기 위해 index.js에서 사용을 한다.

그리고 이미지르 사용할 것이기 때문에 images 폴더를 만들어서 거기에 이미지를 넣자.

이제 실행을 해보자.

<실행 화면> 원본 이미지가 커서 잘린다.

이미지의 너비, 높이 값을 주자.

너비와 높이 값을 주면 이미지의 비율이 깨질 수 있다. 현재 이미지는 티가 안나지만..

그럴때는 resizeMode 속성을 주자.

'contain'은 150 사이즈에 맞춰서 이미지가 비율에 맞게 들어간다.

'cover'는 150사이즈에 맞추지만 이미지가 잘릴 수 있을 것이다.

새로 이미지를 인터넷에서 가져와서 보여주겠다.

인터넷에 이미지를 골라, 마우스 우클릭을 하고 이미지 주소 복사를 하자.

이미지를 누르면 효과가 있게 해보자. (클릭 이벤트) 눌렀을때 검은색으로 표시됨

TouchableOpacity도 알아보자. 눌렀을때 약간 투명하게 된다. (클릭 효과)

이제 클릭해서 이미지를 바꿔보자.

누르 때마다 계속 이미지가 순차적으로 변경되게 해보자.

물론 인터넷 이미지도 사용 가능하다.

이미지를 하나 추가했으니 num의 최대 개수가 바뀌어서 2->3으로 변경하였다.

이미지가 추가될때마다 아래줄에 추가된다. 그러다가 화면에 안 보일 수 있다. 하지만 스크롤이 안된다.

이럴 경우 스크롤 뷰안에 이미지들을 넣자.

번외로 배경을 주고 거기에 글자를 놓고 싶다면?

배경을 주는 속성을 다로 없다. <ImageBackground>태그를 이용하자.

---

<복붙용 코드>

MainComponent.js

import React, {Component} from 'react';
import {View, Text, Image, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, ScrollView, ImageBackground} from 'react-native';
 
export default class MainComponent extends Component{
 
    constructor(){
        super();
 
        // 이 컴포넌트의 특별한 멤버변수 state
        this.state= {
            img: require('./images/ms19.png'),
 
            // 이미지를 순차적으로 변경하기 위해
            imgNum: 0, //배열의 인덱스 번호
            imgArr: [
                require('./images/ms17.png'), 
                require('./images/ms18.png'), 
                require('./images/ms19.png'),
                // 네트워크도 당연히 사용 가능
                {uri:'https://i.pinimg.com/236x/ae/c9/ea/aec9eadd89aa51a9b753b221f3bcce12.jpg'},
            ]
        };
    }
   
    render(){ //render 오버라이드
        return(//리턴할게 한개가 아니기때문에 ()로 여러줄 쓸 수 있다.
            // <View style={{flex:1, padding:16}}>
            //     {/* 이미지가 많을때 스크롤 필요 */}
            //     <ScrollView style={{height:300}}>
            //          {/* Image의 스타일이나 길게 쓸거 같으면 아래와 같은 줄바꿈을 해준다. */}
            //         <Image 
            //             style={{width:150, height:150,resizeMode:'contain'}} 
            //             source={require('./images/ms17.png')}>
            //         </Image>
            //         <Image 
            //             style={{width:150, height:150,resizeMode:'contain'}} 
            //             source={require('./images/ms17.png')}>
            //         </Image>
 
            //     </ScrollView>
 
               
 
            //     {/* 네트워크의 이미지 보여주기 : 사이즈지정이 없으면 보이지 않음*/}
            //     <Image 
            //         style={{width:150, height:150}}
            //         source={{ uri:'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMSEhUTExMWFRUXGBcXGBgVGRcYFhYVFRgXFxcVFxUYHSggGBolGxcVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGhAQGy0lHyYvLS0tLS8vLy0tLS0tLS0tLS0vLS01LS0tLS0tLS0tLy0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAMIBAwMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAADAAECBAUGBwj/xABAEAABAwIEAwUGBQIEBQUAAAABAAIRAyEEEjFBBVFhBiJxgZETMqGxwfAUQlLR4WLxFiNyghUzU5KiB7LC0uL/xAAZAQADAQEBAAAAAAAAAAAAAAAAAQIDBAX/xAAuEQACAgEDAwIFAwUBAAAAAAAAAQIRAxIhMRNBUQRhFCJxgaEykbFCUtHh8QX/2gAMAwEAAhEDEQA/APLqdMGYd0aC0hxtM2lsbarV4X2lqsHs5/yhf2Y0zAEC5kgSZjTWyzKWELcoLZzhxF+8AB78C40mNwDbQoNN0OkXvpECNpHqud7HI0WcTd3cJNgSTHvR3hYnedfQIHtj9xHjZDGgMG+tot+ycGQZMRfxH2fkopCpBX1SbtmR92lV3uy3uD8PXn0RmuuI9dP7KZOYRyN7bHWfNCensJPT2AU60QYkz4q0HZ/E6E2jlcaKvTqNHdy2kgg5vnaLqdOzYI8rHW2vlPmiXkUvJP25BLX3MWPNMKuxF9R4a6eii6kHAA28xM7R97ITmwIjvHxIOvunXySSTBJMKWNcYgA9R9VrcPwhGXIwEkx4za0HqTJIGixpIyxHeg6zbWNLFa3AMXUDi1j8joMSZB5ggEbF2+ymaf2Jknt4NHGcPlxbTaWEAMeyC01CXCAQ67SA4OgzIzA21o8MxdfDvfSLjSaTdrocwwXMGdsHOJ3HjbUD4hjnkv8AdE3MSXuve7p1I+Cyg8yQQTJBiYn028OiuMtjSLs6XF8d9rVZnIIY5sta32YDWOfAZBgj2ZYwS0RzbcooqsfiqdZrWtbVecpEh1Oq1xdBptkuhrgCDrmGgEDDwuJc1rwG5wGgF0EgCRlDjqALx6eGhwnCO9tNOm7IILw46NcBIMW3I5GTIglXd8jQfjOWoBRZLWAlzabpc5lqj3Oe6pdnd/LJ2sDrZ4LhcM176lXNkqgUwPbECXgFrdQ54MA3gttIBC1uP4rBV3lg9mKnsgxr3VCHte/OMvsx3AWuaZHNwiLTkdo8Cx1Nr6bKNOi7IM4a1tSWvbnJaCADmzktbMAC4Bha0k7ss6HgFd7A/COdTuHNNTORUL8ob7Qd0GqC4gBxIMiLgSuQxPZDE03TUp5wQPcJkOLs0AhpuL3IA7y7LgHZamCyu2tULcrfZAGMrdYkj3Sb5Y1JN5M9Y5aqOpbhZ47jOEspgVAyoaYDS9jnOAaQ0VKlMua07zY5cpb1C5viVFzXQWZASXAEDNlJMSZJIiB5eK99c0XEC8zYb6rlcV2GoVBUc4k1Xyc4hnfmQ/K22bmQL6xJScCkzzns7h6ZdNai99Ig5nNDg1hH5iWiYBIJjafBeidnjhmVw81IrupMZlcXZXbBzHPa11SQ25I9EHC9i3UqVUZmVXuMsJL2HRwhzgYk53d6Jv6C4J2QrUsUypmhlPTM/PmzNhwaABlAga62SSaBnckLl+2fBKmIDC2XgOb/AJcNgCH5nhxvmgjWRbSV1JUV0UmqM7o4ip2JIGHa0tOQuNZxkZiQIc1v6heDNvNQ4xw9uDpuAY3K8hoe5z5DnZnuzgZszC5rBlA72YgjWe6AWfU4OxweHk1A9wcRUOZoi2VrToIsm8a7Bq8nM8KqZMWxpyuzlzw61ODUaCGsYDDxlDZcJvyvPZqo3h1MVPa94uggS5xaA4gkNaTA0GiskqoR0mctzl8T2IpVK4cSG0QwtbSYIykzJzeLi7xhbTOBYVtOm11NpZRByl+gn3i6bGdbq+1YvbDCPqUCASabQX1GNBL6uWCxgI0bNz0CqkraQrbKuM7SkPPsqDH07ZXGsKeYEAzky2Hz13SWBgOxNWtTbVfUDHPklrmXFzG9rRbbRJYrP6jsvyP5TljUJi5IGkkwJjbbQeij7LroTNp25qsMwNpPRSZWnYwI/svOcX2LcX2DOpnlM3gnbyUyRaYHSxCEx4mDy9PVFqukC/XkVLuyGtyAw7jJF4Gn34BEr4nM1rYgtEDKAJBM979W9zzQWmN5JtuNfv4IbwTJnfl8FVXyOm+Qrvek62Hjy01KNWwj8rXhsMJIEZZkXILRfS8kIVI7/EfU7p69Uc9NYPwndLuLe6ojUOxiOmpHP1UGVM0g6ekaSZ5/sg1XQb39UQVWtg69Pn9VWnYrTsPXY9h20kGwPkQmo1426XjW3op1MSMpG2uXk7XzEgKIe0tMtieuyXbdArrdBwIIdmuCSTImdQZ5eSkMQC4jKwBzpkicsnRpMmOm6AwwC6N9bSDYAggSD1Clh6c+8YBsbafuP5S45FxydHhTRY6nUDnZqpDWhoI5NqPJg2zE2N7T0Wthe05LhRJdJkOdnIeWwQwh7iJjODMCYMg7cXk9lMgkSDBmHDXcSJEa7bqy0MNaWkU2kkgAPcGNMwy0zIgRofkfQf0PRuG9j2mkRUIOZrCHAuzEgNJL4OWQ4OiOl7Lbx/CBUpsZI7sSXMY4PGjg5pEXHJV+FY+jQpZWmo4Xf3mFkZjoGviBbZWsPxmlUIDZ7xgSAPhM6rohONUzRcFttMNENAA5AQPQKDijIVQLewoCpQmlIuQMkEihSpZkxEiVBMSkAqsVBGqLk7U5VahUBKQCmVAlCZLQ8JShGolmVpkUSJTqKdOwo8TDRm2neTaBra1lHEYZzXd5habOi8EGYMnUHYpi7x+7jTyU6dNxvJIMTmO2kf36LyeDThbgmkETqd5vOlvmpmoRtb4DS49VF7cp72h08eduqmHZhrljfySYnvuQpQZiJ5bcvJPRZMmb8txuPVCzXJHruemisNonuwWkG3+nmTyCbKaI5xoNOsD7uh1xBmAfTXqR1RqUEju6bkHfTXwT4ho7pHOwO8b+nzUp0yE6ZntZtPiToJ+9lMUhYSZ1NrAbX639EUmLyBfSxBgaddUKvUc92YmcxHIAxpawjyWu7NuSWJogAFpkdb3k/wAahADZsL/L70R6VYguiwMtN7X5mLjog22P0KFaBWtmW6NN/sy0SBqfLTTwKs4LDPImYgCPW8jwk+ip4avlP7eK1GARIJA03BBPUflhYzbRz5G0V8Q4l4yk3AJiXZC0EuMDkBNtBN9ULBURIJN5vrMayB96KLqLgS8AiTLc0jN4bG0K5SrWGRsmCH6G94gbcvGfIe0dintHY6bA8TrYn2dMB1XLZp/zMwBtJc07AEiQY6hdRwekzDu9maBD2ul7784Du4DIg781xx4u5zQKPs6cFpcA1t3AmCGuaTIJifpC9D7JOc+i17xe4Bg8yTDpOYT6XCMdaq7l4/BrRKg5qO4KJau6zSio5qgQrDghOCBg4T5UxKhmVIknlCUqBKSpJCHLk2dLKlkTsVDPKC4o5aoimpsGgIaiNYiQmWiTZDpDQknhJXRNnhrsSYy3IEkTtOvy+CE6qdOSM1omQBKd7yLEfG3w815dq+DS1fAB1QgdPDmkK0je3nbr8E7ri0TuJhRFB2tvrsq2L2CViJ105aEbGB5FRbW5EedkzaUXOlxexn6qLmi5BbtI3E8h0+qSS4EknsW26Aj47SpPE5Q6WkTdpi9tr6xqgOeBcE/7vC0eacO3Dc0CL3AOuqzpmaTJuoMsQTIIMjX5i8iZHNM9zXWIEbQRm3F4uE1If2MTPn0KVYggza0SL5jeCJuTfZAb2RdRaAJBAHS+5ANr33g2T03tY6IljjMHKXEC8ZoOU6CRzPgo1mtLdXFt4LiBLgdQwe7bmT73oSnXEZRdtrHvDob6QLeZ5q22i22ib6lEsllM54b+Ym4MOMAZYdMxtCem8kaCev5ukboNeiAZi25Gnj0Vholskm5MWkGwiYPOL/2WcmmZyaYzsWdHWm9pOsSYndSws5ibAbnppfcKsKMaggXFtbbEclfwWmxMixmOceG2s3UyW2xLW2xu8JdSe0NcJqWyOIZlGX8pkeAtOpsvU+E4ppa2mZDw0WJaS4AXcC0m37hed8G4UMTamHE5pqsbIpwRlmTBBJ1jSDaAvR+G8AoUAMre+IlxJLiQIuT0+S1wRfY2x7IuPpoTgrT3qpVeuui7A1FXeVOo5AcUARcVAlOUg1OwoQCmEgE8K0SyTUzinBTEqySBKg5yk5DSAWZPmSDU4arVkOhJ0oSVUxHg9N97yUcVAQW6cvPboq9N+vL5KwHcgHDlOv7FeVM1mVXvixERbwTfiSOo5H6I1VzCeXwI6dUF1Nu8+Kq0+UUmnyh6lY+8HX0i9wIgna/0UXuBnblGseGlvJSp4d05ReZjUz0AG9kFlM81SopVWw9Frdzy+tiikAbkDU2325A/fghikZFwOu4B+iIA6C3zG4IHzKTYm/cNRgz3o2tEW3vruq9Wo5pDhY7EcxIkHa0einSpgjSNByP9/wCFGpVsW3F76xbf75qVyJcg6Dye7r5TGl4+HmrVKgBcG/08NVWpA7AnZXKJB7ukaWvz36omwmy1SdAmZkXHXx325KFSpo5rnW96dLzERt4j+Vh6URcEm1/pG/krOHwRql5ZctbmyfmPeiGwCDAIN1iqsxSVlWq+WkkSRbMBOlwCR0+RQqbnB0jvSAYF5Gp08PFdVw3h1JuFqPr05qe9T7x/0vDgCALx3TcE6EWWPisSwMAEg37oADMsyLi5OtzrOvJ1Ww6rY7j/ANPOKNq1Wh4Iq5T32ugvDYAZUEjNE8psJmLekvK8C4NxFtMyGtMHN3ps4TBF7iXA+i6zi3bJuJY1v+bTcLk0jLZkSHNkSNbk25FaY8iimmOM6VM9KeVVqLn+wuJLmPaSZbltmc5l5MskmB+2ll0pAW8ZWrNluio5qGQrhaEN8J0Oyq6mkGQiOcguKpUiWSJTShylK0UkS0TlJDzJZ1VkhMqiTCbMolOwolnTZlEpAK0yGicpJBJOxUeBsLYumdUkciOW4Qc/mix0XnUdNBGNLteXr6I1KmRvblKFQeBrr10+CJnOkW5HWdlnKzOVg3PIJtGuhI6G45i3gVFwAiHHMSQQQbRGW+8yfQc1a98X10PMeJ1VZwDTEfROMhxkNSJBiNOmifKZ94Abeeqk6oCbA+KTAUFUFo1DF4t1uOoRa+FDmy0ieh6lBoOg3uN97I76hiQLwJ3B20+9Ss3aexDi09ig0lpPxVmk6bmfT7+woucHGdJ15IzsM5h7zcpiYcIMECDB1mdVT3Kasm+g4xF/VtxqZRKeZsOGa0kC1jOvj/Cjh6jpsQbGxNtPhomFUZiYgHUcid4WW/Bk1LguUO1VdlR7qby0uJzaDNOudnuu80HHcXLyf8tjczmn/LGRpgAZS0mMupjQEkqpi6BmY8Y3HMGNfGUbDMpFha8960PEw0XkZcsun4dVqmuxca5RU9lDi1zhYkHWxG1wJuIWrgriX6tvYXgWnLvsfW4UuJYSkGZ6VVr3WziHBxJyyWgmNQdNRta+bn7jeUkHQ3PO/IIkr4CUbPUOy3FqNHOz24LZltiLuNwZAgj0uei7A1F4lRw1VhjK6TYOAdlJIBEGNSHC1j3l1XZviNVr2MzuM2c2sXZA7QBrrkEkGJ0Nrpwy1sxxb4Z6D7RRc9CUSunYsmYUUOUyewbkyAoOCiSoOKaoW45TtCGFMFWmiWmFyJsqhm6pZlSkiaZLKllUM6QenYUThJIFJVaJo+e2EI+a0j4oNJkkclbdTOghefJo3k1YNlQC8XRGuOt76/2SFPopsp7T5KG0S6C0amx0g/z56psUZdJJmLXmBoAJ28UNtG8adUb8Od7x8gotJgopMZlME39UWlhc5EkgXJgSbchv9nZWMPhJ032VxmGgQZ3+I0WMsqTNEqKeLwWW0tPdJIaZLSCRldG8jXS45hUyy3T71Wl+D9PgoPwxHgksqHRnMpIzQS4Zi4iw/UYnRoPnAVoYaU9TD+RCrqIVFao5jT3SXAz7zcpF9LEjkZUPakQZyg3+l+ekK0WtklzSZ5HLB56EeUKvUoyLAACb3k7iRO3MBUmmJwQdlWQA6DsNIcZsemvwVDE0yHa36203t4IlRmQR3Xgg6c9J6c9N1WqDNds6CZ+k7KoRpmShTLdKnNp6AkDZdr2I4MC7O6mKtJzWiQ5sscdc7NQQQRIOhm944ag+BHLxC6jsnjzSrMcXBjSYMjulpmZMjyPhySb0vcFtLc9KwHD20WhrSTlaG5nHvFo0DiNY2KNlA2WHxbtYyk/IKbnGxkkBpaRIcCJtHOFqcMxza9MPb4OF+66AYuBsQfNbKa4Oja6DEobijFqb2SrWPSACRR/ZhRLAnrFpK5emJRTTQ3MT1BREJEpspThhVKROkZOAptolTbRKfUQtAIU1JtNHDITp6xaQeRMiJI1BpR8+06s7QOmp6Kw203j70QcO0m3qrf4JxgkQCJE2B8J1XNJoTSIUxmiR6KxSozZEwuEuBqVbp0ZdA8D1vsueeRdhfQqtwcfyrdCid+ev0WnT4cQIc02iQR7s7n1HqtLDcLIbntEluomRBPd1AuLrkyeo2NIwbKeCwYO261hwzotTg3DM5AjcLsKfZtxZ7k3sQTpAtB+9V57nObbidUcaS3PNn8JvAGtgqdXAGcuXSfERrovQcXwYiZEQQOo6wOX0VOpgYY5sgyWn3ZcDuQ+JFo8fKVWOcl+oHjs4B2DLbEX+hvPxSqYXfRdNX4bMuAi9xe06Hf4lUq+Ctp8FXX3F0jnamGaJl0ECdCQT+kEb6dNb883EUyDpG3JdRVwzqYvTHfFiWkmJF2zzgjcXKq4WkDUBqsL2Ew4ADNEiSOoA1631v3YsiM5RZzWXop4Xh76z2sbAcbAEtaOm9yfUrb4pw1oqO9kc7QBBAzAiBMw0ZTHMc90HC4d0Et1bBLhfK02kTvcLfqUZNUzKq4B9Mw4ZSIkGQROiJTw5OhiR5Hn0C7o9n21cO2pUcfaANDAJ79OAIAcSSQcxne99xW4d2Zq1ATRbo4w0m9uvumLeM8lMpsTxsJ2OwtBjprxcMDS4GzxtYQRbfkV6HTwrWiGtAHIWHwWZ2c4Ox1N2eiWPALHSZzScxNtwd9V0f4dNN0dGONLco+yHJRNPor5oKP4dVqLooGmFE0gtE4dR/DI1CozjRCY0RyWj+GUThkawozTRHJLKtD8N0TfhjyT1hpKBYmhaH4Q8lF2CPJWshLiZ5eoSFo/gOag7BLRZCXEoZklbOHCSvU/BNHgOGom4B3E+Pj6rq8PhqtTCgPIcymRDdXhpPvAToO8J1E8jfN4TQBbJMTsehgffVd7xvs7RbgqFVvcqvaGgyTINySBadptq3lK4nl3fsTCLZx1Ls9WBdl0YwVc0wPZkahpg35RNxZbPZ3hj/aANy5xeHAOEQTMaG15v0WeytVL2N9pGQGC0mBmImANLibbrreDUDS9nU917HAPJeCXST3mjkBAtOmmq58k0+DWEE3aOiwXZB9bv1nETJ01JJJsbgE97zVnjXZqnRoS1xJkWgRMa801LtQ5oytII2JgmNNlY41xYVMO2SMxdoPD+VjkfpnjlpvVXL+p0RjK/Ypdm6BDwWjS9ui71plukarjuzGLax0nr8l17MQxzZBEb9Ft/5ulRlct/As6e2xj1eGh0xLjoJkQYm3NEdwtuWcomLjQSL/RW/wDiNMWCIXtqNgG3Q3WuLDglelpuuP8ApLlNcnN1OElhPukExGUEtJE5hERqrNLs3RAMtkGLabfvdaNbGU6cNO3gYRBimGO8L6XCvF6f09tNp128BKc62R55xng7MwbLqY7wBdmcNXAOIEZdjaVi4bC1Wveab5qTOaSAdS7WAbSbi916viWseQ1xE6gKlW4dT9k5sNMNIBcNG8idVn8HKLbi1Qa0+TzY8ErOeD7I5XS0wwNEOJuGNN4iekDxUaPY7EOLiHZ8wknmZnvB8EbnyXp2GxFMMzZxG8kWMQfiEKpxigNajfK/yWiwY6+af8Eu/BznZrhNRtMZmDLJDqbhp3pkZjoAY521XRs4dTa7M0ZTactgYnUCx1KVHitJ7g1rpnlp92KNUxdMGC9oPKRK6cUcUY8p+5D1eB2UWgkgAE69VKFXp8RpOBIe2BYkmBfx8CiPrtDc0gjmCI9Vspwq00TTCQllWc7jVLu94QbyTAA8U7+M0QBFRpnkR8eSjrYvKHpZfyhKAq7cbTMxUYYuYcDHoVXxvF6VNocXAzoARMc45JSzQW4aWX4CUBcvV7aUgRlaS3ckwd9B6K2/tXhwAQ4nnA09YssfiIPwFG7ATQFyje2jM5zNhm0GXSNTyM/RBqdu6YcBksTrN8vhsdDqpXqIsHS7nYwokLlMb23pDKKQJc79UADlusXiHb8+7lAPNjtTbWxtroU1mV0gdLuegVCBqq9Vq82w3b94s8Z+ROo8YWfiO29Zwc3OS0nT42OoR1XfBDyRPS3apLzGn2qrAe+7zJSV9Z+COtEFwDhILZqyw3GUgggzIcDMGy3q+Hc+kKXtTkDswBJtqLcrE81jUsZVFs482n6FHGKqm4ez0I+K8WebNezX7f6EpBMPwhorRn0aHa7EkRPiJla9LAtuC+RFriRroALarHGJqA5g1hcbSZFheJG0k+qkMfiI0Z5SR8XBQ82X2/BarybTMHGjx8fLZAx2KhwZmnLreQJ205Aeqw63EsTpYdWi/wAygUs+pmTuZS0ya+ajeGT3Ox4bjrgSt9uKeBYhed06jlq4bidUCCCR8VlKLXBt1PB1b6zuYRaeIcB71+W3quZHFDuHDyRG8Sn8w87KFNx7fyLqSNPiGJI702tr1WFU7Qx/dWXYydx6rDxnFzSc4ZMxc6Rc+7lAEAa6EK8fzukhdV9y9W7XkG0j/d8dNVl1e1huLwdbqI4nWeMww4cLj3ouLGQX2QKnE3j3sCD8foV1U2/mV/dGbzSWyGPawgEZba6/wnwHFjiKmRogkWk8rn4LPxfEmkszYIMAdJlvv910MnJuY56J6XaOgx0jChjhIsACNj+UFb9J6flhv9V/kyeSTOqpsxLDmZ3TBEhwBv1lDfRxBknU83An5qhgu0DqhGWm8A7wIHWTC1Di/wCofD91yTnkg6kkZ9R8AHYevyEeISd+KLPZl1gZAzWnnCIcWdgPX/8AKcYt3Tyd/CXXl4RPVZUqYbEGBbTc+fJQOAxHNvqfo1XTiXc/v1UfxJ+z/KOvLwiXkKlPA4gbs9Xf/XwUKnDsS4Xey07v31/Krv4g8j6/youxLtvn/dNeon7C6jKX/Ba3/UaI5B37KLuC1v8ArNj/AEn6rQbiHcvl9Qm/EP8Atw/ZHxGT2I1me3gdXes3SPdOnql/h5x1q26N/laPtnbmPP8AhRdUd+oIXqcnlfsJzZXxHAs8E1DIESGjbpKqO7Mt/NVceuUfVy0TmP5vv1TDNu4eX8qvi8v934J1sxv8MNn/AJzv+1u/+5L/AAxTn/mv/wDD91rZh+v4woPqD9Xq5V8Tm8/gl5GUB2ep/rf/AOCSu+1H6vinS+IzeSdTMz8YDt9VE4ocj8QqcjkfvqnBnY+pA5Lfpo0Ui6zGN5uHiSUX2vInxCz8mlzPqpUyBaSL8v4UvGuw9RoMqjn8lZp1h1WbSqGef34K3Tf0WU4FqZoU8UOiOzFDp8Vll43jzlO0/crB4kaqbNb8YOY9Y+aicQ46OA8wVmipA1PzlQNeNx6QksJXVZoOq1dnjzb+zvos3FUKpkn2ZJcDPeBEQAAYkC3Pcpjiuk+BH7pHGgayPitoRlHhITylf8ZiWE9xpDiXGL3IAMAG2ii/i9YX9n6td9CrX4tp5HxCG6s39IPn+y1TXeCIeUzOI8WdUYWOY0B1rg+MiTryKzMPlYHd2X2LHguzB0zJvEaLqG4r+k+ql+JG9ttvnC3jmUFpUNvqT1UOzjTCB3H35SrFLHtd+SoPEH5qqarT+YqJA2IPwXK4QfCa+5LyI0hWb4eNvom7v9KzW22HqpW/T/7VHTJ12X8g/p9U+QRt5Eqhlb4eUfFFaxsbev7pOPuGosuAGpHr+4TFo5j1H7KsGt/sR5pnUwdXA+N/LdGkVlnKP1fJOX/1fJUvwgmxaCfv78VJ2GdfvDpoPknpXkRb9p1Hr/Kianh9+aovwuuh/wB5v5IZwwB5dQ4fUpqEfJLsvmr4ffmomr4LP/D83i/PJHwTig7Z7fSfkYV9OPkltlzP9z/CE6t4/wDd+6r+zI/OD1yn6qL2nmPT+E1BEuywa3+r1H7pKqZ6nwH8J1WhC3Ivpj53g8/v1VdzOTj0sfSFdrVQ0xl8/pZV6mKHKfDqtINmsXYJhgaR42PoiCr1+Z1UPbA/l9QUjlGhnkL7a/RXXkuizAtIHy+CXsvuR+yq/jDAj4+vyUxiKmwtuf4U6JBRZjx+A85KLcX0VVtfNNhbmBbf907a55fLTmpcWMte1PP+yQf4enwVbPyInrb0UhRcd/iPPe6nSgsI6odT9COqhnH3CgaZtcnoD4b/AHqomkf51KpJC1EzB1bPkhezA/p8z+6G5uUb+ZHyTOqE6C33qtFEVk3U+Tj9+aHDuXxP3Hil7IOG7d9/VOxg/U3lOnPbwVCIGof0E+EQmL/6Y5EgormkiQf7jVAfbc+N/qmkgoI2r4ff2FL8U7mqjvX6+CgWjqPA+n09U9CYUXxjSN1NuPf/AH9dSsyDqHkenx9FAe15g+IR0Y+wUbY4o4ajT5abJmcV5hZArVB+X0gKZxThrYW2U9CPgW5sjiY/THkE5x7TsOmqx24rkBbnZGbijMx96bKHgS7Ets1fxTZ6+YUQ1rheI0Fp5aXWd+LFu7seR36pquJ5gdLeHLyS6T7C1M0hSFxbr3fndDrNH5Wggff3dUhjh1Hhp6bafBSGPGoJ038pvylHTmh2w5o7QR/pjUX3nfkpPB1BqT4gfIcpVd2OOs+c7X+OiD+PcdzHLfqOieiTHZcBcf1ev8pKj+K5gzJ0jZJPpsDc45TAmw/Lt/SFnNpNymw1bsP0hJJY4n8iDFwAxoiYtcaWRMONfA/VJJdH9BsWKzRe231KE5gtYJklERipan73Uq9pjmEySb/UT3CsH1/+Kar9fof2HokkpXJL5E4X9fkqtY39PqkkqjyJjj6fVE2Hh9QkkmxMk7R3moVXHvX3PzKSSEAKtp6/JFw7iZBv3vqkkm+AJVGiRYfZVfKIFtvqmSRHgCFZgBFhpy6oQNz4/ukktI8AM4WCjU1TpKkCGqD79UBx+qSSqIIk090/e6l9/EpJIBijXxHyKaobhJJCGJrjAuf76o7NT5pJKZESE/U+J+aSSSQj/9k='}}>
            //     </Image>
 
            //     {/* 이미지 클릭 반응하기 : Button이 아니면 onPress속성은 사용할 수 없음 */}
            //     {/* 터치를 인지하도록 만들어진 컴포넌트들 TouchableXXX 를 사용 */}
            //     <TouchableHighlight onPress={this.clickImage}>
            //         <Image 
            //             style={{width:150, height:150,resizeMode:'contain'}} 
            //             source={require('./images/ms18.png')}>
            //         </Image>
            //     </TouchableHighlight>
            //     {/* Button이 아닌 컴포넌트들을 클릭하고 싶을 때 모두 사용 가능 */}
 
            //     <TouchableNativeFeedback onPress={this.changeImage} 
            //         background={TouchableNativeFeedback.SelectableBackground()}>
            //         <Image 
            //             style={{width:150, height:150,resizeMode:'contain'}} 
            //             source={this.state.imgArr[this.state.imgNum]}>
            //         </Image>
            //     </TouchableNativeFeedback>
                
            // </View>
 
            <View>
                <ImageBackground source={require('./images/ms19.png')} style={{width:'100%',height:'100%'}}>
                    <Text style={{color:'black',fontSize:32, fontWeight:'bolde' ,margin:16}}>Image</Text>
                    <Text style={{color:'orange',fontSize:32, margin:16}}>This is background image test</Text>
                </ImageBackground>
            </View>
        );
    }//render method..
 
    changeImage= ()=>{
        // 이미지의 경로를 변경이 아니라 require()함수를 통으로 변경
        let num= this.state.imgNum;
        num++;
        if(num>3) num=0;
        this.setState({imgNum: num});
    }
 
    clickImage=()=>{
        alert('click image!!');
    }
 
}//MainComponent class..