javascript - React Native 卡片图像封面

Question

我正在尝试在我的 React Native 项目中开发一张卡片，其中卡片顶部的“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>

发生了什么:

期望的结果:

Answer 1

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

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如果需要的话。