Question

我正在尝试在我的react本机项目中开发一张卡片，其中卡片的顶部“ 70％”是一张覆盖卡片上部70％的图像，但底部的30％用于文本。我一直尝试使用调整大小模式（包含或覆盖）或将宽度设置为“ 100％”并相应地调整纵横比，但是没有任何效果！救命！

代码：

<TouchableOpacity style={{width: '100%',marginBottom: 25, height: 200,borderRadius: 15 }}>

<View style={{ height: '70%', width: '100%' }}>
   <Image style={styles.habitImage} source={require('../../assets/habits/Productivity_Long.png')} resizeMode='cover'/>
</View>

<View style={{ height: '30%', width: '100%', justifyContent: 'center', alignItems: 'center' }}>
   <Text style={styles.habitTypeText}>Productivity</Text>
</View>

</TouchableOpacity>

继续发生的事情：

vbs

所需结果：

Answer 1

我认为您的问题是将Image包装在一个额外的视图中，这是一个可行的解决方案。

export default class Card extends React.Component {

    render() {
        const { text, image } = this.props;

        return (
            <TouchableOpacity>
                <View style={styles.container}>
                    <Image style={styles.image} source={image} />


                    <View style={styles.textContainer}>
                        <Text style={styles.text}>
                            {text}
                        </Text>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    container : {
        width : '100%',
        height : 200,
        marginBottom : 25,
        borderRadius : 15,
        backgroundColor : '#FFFFFF',
        overflow : 'hidden'
    },

    image : {
        width : '100%',
        height : '70%'
    },

    textContainer : {
        flex : 1,
        alignItems : 'center',
        justifyContent : 'center'
    },

    text : {
        fontWeight : 'bold',
        fontSize : 20
    }
});

如果需要，我还制作了Snack。

Answer 2

尝试使用flex

<View style={{ flex:7, width: '100%' }}>
   <Image style={styles.habitImage} source={require('../../assets/habits/Productivity_Long.png')} resizeMode='cover'/>
</View>

<View style={{ flex:3, width: '100%', justifyContent: 'center', alignItems: 'center' }}>
   <Text style={styles.habitTypeText}>Productivity</Text>
</View>

反应本机卡图像封面

2 个答案: