[React Native] Image, Modal

1. Image

이미지는 로컬에서 가져오는 방법(1)과 원격에서 이미지를 가져오는 방법(2)으로 나뉜다.

• assets 폴더와 그 하위에 images 폴더 생성
• 무료 이미지를 다운로드한 뒤 images 폴더에 삽입

(1)

import React, { Component } from 'react';
import { View, Text, StyleSheet, ScrollView, Button, TextInput, Image } from 'react-native';
...
import Snow from './assets/images/snow.jpg'

class App extends Component {

  ...
  
  render() {
    return (
      <View style={styles.mainView}>
        <Image
          style={styles.image}
          source={Snow}
          resizeMode={'contain'}
          // resizeMode={'cover'} 
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({

...

  image: {
    backgroundColor: 'red',
    width: '100%',
    height: 300
  }

})

export default App;

(2)

사진을 가져올 수 있는 웹 주소(picsum.photos/)에서 URL을 복사해온다.

import React, { Component } from 'react';
import { View, Text, StyleSheet, ScrollView, Button, TextInput, Image } from 'react-native';

...

class App extends Component {

...

  render() {
    return (
      <View style={styles.mainView}>
        <Image
          style={styles.image}
          source={{uri:'https://picsum.photos/200/300/?blur'}}
          resizeMode={'contain'}
          onLoadEnd={()=>alert('image upload')}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({

...

  image: {
    backgroundColor: 'red',
    width: '100%',
    height: 50
  }

})

export default App;

---

13.5와 14.0에서 image가 출력이 안될 경우

[참고] https://github.com/facebook/react-native/issues/29279

[참고] https://github.com/facebook/react-native/issues/29215

 

2. Modal

화면 가장 위에 표시되는 레이어이다. 

• src 폴더에 modal.js 생성
• App.js에 modal.js import

 

import React, { Component } from 'react';
import { View, Text, Button, Modal } from 'react-native';

class ModalComponent extends Component {

    state = {
        modal: false
    }

    handleModal = () => {
        this.setState({
            modal: this.state.modal ? false : true
        })
    }

    render() {
        return (
            <View style={{width: '100%'}}>
                <Button
                    title="Open Modal"
                    onPress={this.handleModal}
                />
                <Modal
                    visible={this.state.modal}
                    animationType={'slide'} // 하단에서 올라오는 애니메이션
                    onShow={()=>alert('warning')}
                >
                    <View style={{marginTop: 60, backgroundColor: 'red'}}>
                        <Text>This is modal content</Text>
                    </View>

                    <Button
                        title="Go Back"
                        onPress={this.handleModal}
                    />
                </Modal>
            </View>
        )
    }
}

export default ModalComponent;