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 包装在一个额外的视图中，这是一个可行的解决方案。

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>

React Native 卡片图片封面

React Native Card Image Cover

javascript

image

styling

reactjs

react-native