React-Native:borderRadius未正确应用于子组件(即Image),但该属性应用于touchableOpacity。

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的新手。我是React-Native的新手,所以在这里遇到了样式问题。边框半径被应用到可触摸组件中,但它并没有被附加到可触摸组件中的图片上。是不是因为父组件中的flex-direction: “row”(即TouchableOpacity)?

解决方案:

为图像组件使用’resizeMode’道具。

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

给TA打赏
共{{data.count}}人
人已打赏
解决方案

Unity。我在寻找一种方法来比较两个游戏对象碰撞时的速度。

2022-4-21 18:00:16

解决方案

如何用jQuery改变按钮的文字?

2022-4-21 19:09:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索