[React Native] React Native Component - 12. Image

 

---

2022.01.11 - [React Native/Basic] - [React Native] React Native Component - 1. Intro

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 2. View, Text

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 3. Style

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 4. TouchEvent

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 5. Button

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 6. ScrollView

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 7. TextInput

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 8. Button, ScrollView, TextInput 심화

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 9. Picker

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 10. Slider

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 11. ActivityIndicator

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 12. Image

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 13. Modal

---

 

---

12. Image

이미지를 불러오는 방법은 2가지가 있다.

 

1. 로컬에서 불러오는 방법

로컬에서 불러올 때는 단순히 파일을 프로젝트의 이미지 폴더에 추가해 준 뒤, 해당 경로를 import 하여 그 컴포넌트를 source에 적어주면된다.

 

2. 서버에서 불러오는 방법

서버에서 불러올 때는 source에 {url: ' ... '}을 적어주면 된다. ...은 이미지의 주소이다.

 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {Component} from 'react';
import {View, Text, StyleSheet, ScrollView, Button, TextInput, Image} from 'react-native';
import Header from './src/header';
import Generator from './src/generator';
import NumList from './src/numlist';
import Input from './src/input';
import Picker from './src/picker';
import Steak from './assets/images/steak.jpeg';

class App extends Component {
  state = {
    myTextInput: '',
    alphabet: ['a', 'b', 'c', 'd'],
  };

  onChangeInput = event => {
    this.setState({
      myTextInput: event,
    });
  };
  onAddTextInput = () => {
    this.setState(prevState => {
      return {
        myTextInput: '',
        alphabet: [...prevState.alphabet, prevState.myTextInput],
      };
    });
  };

  render() {
    return (
      <View style={styles.mainView}>
        <Image
          style={styles.image}
          // source={Steak}
          source={{url: 'https://picsum.photos/id/237/200/300'}}
          resizeMode="contain"
          onLoadEnd={() => alert('Image Loaded!!!')}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainView: {
    backgroundColor: 'white',
    flex: 1,
    paddingTop: 50,
    alignItems: 'center',
    // justifyContent: 'center',
  },
  subView: {
    backgroundColor: 'yellow',
    marginBottom: 10,
  },
  anotherSubView: {
    flex: 2,
    backgroundColor: 'yellow',
    marginBottom: 10,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  mainText: {
    fontSize: 20,
    fontWeight: 'normal',
    color: 'red',
    padding: 20,
    margin: 20,
    backgroundColor: 'pink',
  },
  input: {
    width: '100%',
    backgroundColor: '#cccccc',
    marginTop: 20,
    fontSize: 25,
    padding: 10,
  },
  image: {
    backgroundColor: 'red',
    width: '100%',
    height: 700,
  },
});

export default App;

resizeMode - 비율을 유지하기 위해서는 cover 나 contain 을 쓰면 되는데 차이는 영역을 꽉 채우냐 채우지 않느냐의 차이이다. cover는 background를 꽉 채우는 반면, contain은 영역을 꽉 채우지 않고 비율을 유지하게 되어 남는 background 부분이 생긴다.

onLoadEnd - 이미지 로딩이 끝난 후 반응을 지정한다.

 

---

참고 자료

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B8%B0%EC%B4%88/dashboard

iOS/Android 앱 개발을 위한 실전 React Native - Basic - 인프런 | 강의