React-Native: borderRadius неправильно применяется к дочернему компоненту (то есть к изображению), но свойство применяется к touchableOpacity

Question

import React from 'react';
import {View,StyleSheet, Image} from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';

const DashboardScreen=()=>{
    return (
        <View style={styles.outerView}>
            <View style={styles.viewStyle}>
                <TouchableOpacity style={styles.touchableOpacityStyle}>
                        <Image style={styles.imageStyle} source={require('../../assets/images/beach.jpg')}></Image>
                    </TouchableOpacity>
                <TouchableOpacity activeOpacity={.5} style={styles.touchableOpacityStyle}>
                    <Image style={styles.imageStyle} source={require('../../assets/images/beach.jpg')}></Image>
                </TouchableOpacity>
            </View>
            <View style={styles.viewStyle}>
                <TouchableOpacity activeOpacity={.5} style={styles.touchableOpacityStyle}>
                    <Image style={styles.imageStyle} source={require('../../assets/images/beach.jpg')}></Image>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={.5} style={styles.touchableOpacityStyle}>
                    <Image style={styles.imageStyle} source={require('../../assets/images/beach.jpg')}></Image>
                </TouchableOpacity>
            </View>
            <View style={styles.viewStyle}>
                <TouchableOpacity activeOpacity={.5} style={styles.touchableOpacityStyle}>
                    <Image style={styles.imageStyle} source={require('../../assets/images/beach.jpg')}></Image>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={.5} style={styles.touchableOpacityStyle}>
                    <Image style={styles.imageStyle} source={require('../../assets/images/beach.jpg')}></Image>
                </TouchableOpacity>
            </View>
        </View>
    );
};

const styles=StyleSheet.create({
    outerView:{
        flex:1,
        padding:12
    },
    viewStyle:{
        flexDirection:"row",
        justifyContent:"space-around",
        marginBottom:15
    },
    touchableOpacityStyle:{ 
        borderRadius:15,
        height:150,
        width:150
    },
    imageStyle:{
        flex:1,
        borderRadius:15
    }
});

export default DashboardScreen;

Я хочу включить изображение в сенсорный компонент! Здесь я сталкиваюсь с проблемами стиля, так как я новичок в React-Native. Радиус границы применяется к сенсорному компоненту, но не прикрепляется к изображению внутри сенсорного компонента. Это из-за flex-direction: «row» в родительском компоненте (то есть TouchableOpacity)?

Answer 1

Я понял! Мне просто нужно было установить одинаковую высоту и ширину как для родительского (TouchableOpacity), так и для дочернего (Image)

Answer 2

Используйте опцию 'resizeMode' для компонента изображения

<TouchableOpacity style={styles.touchableOpacityStyle}>
                        <Image style={styles.imageStyle} resizeMode={'contain'} source={require('../../assets/images/beach.jpg')}></Image>
                    </TouchableOpacity>