[React Native] ImageBackground borderRadius

React Native ImageBackground borderRadius

React Native 앱 개발 중 ImageBackground를 쓰다가 style에 borderRadius를 사용했는데,

기대하던 값이 나오지 않는 경우가 생기게 됩니다,

 

ImageBackground의 경우 style이 아닌 imageStyle에 border와 관련된 값들을 넣어야 원하는 결과를 얻으실 수 있습니다.

import React from 'react';
import { View, StyleSheet, ImageBackground } from 'react-native';

const image = { uri: 'https://reactjs.org/logo-og.png' };

const Main = ({ navigation }) => {

    return(
        <View style={styles.container}>
            <ImageBackground
                source={image}
                style={{width: 300, height: 200}}
                imageStyle={{borderRadius: 15}}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})

export default Main;