Question

我正在尝试将此图像包含在此卡中的某个块中，但是无论我做什么都没关系，它一直在逃避边界。我必须在样式表中为容器card或容器image设置最大尺寸，或者您将其命名。

我要寻找的是将图像缩放到标题Lorem ipsum dolor sit amet上方的块，而不是一直移动到屏幕。

这就是我所拥有的，该块在App.js的主容器内被调用，该容器中仅设置了flex: 1。这是Card.js类：

import React, { Component } from 'react';
import { AppRegistry, Dimensions, StyleSheet, Text, View, Image, ScrollView } from 'react-native';

let WIDTH = Dimensions.get('window');

class Card extends Component {
  render() {
    return (
        <ScrollView>
            <View style = { styles.card } >
                <View style = { styles.inner } >
                    <View style = { styles.image }>
                        <Image source = { require('./nbc.jpg') } />
                    </View>
                    <View>
                        <Text style = { styles.title }> Lorem ipsum dolor sit amet </Text>
                    </View>
                    <View>
                        <Text style = { styles.excerpt }>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Nunc finibus sapien a aliquet iaculis. Proin tempor magna at purus sodales, et ullamcorper
                        eros viverra. Suspendisse potenti.</Text>
                    </View>
                    <View style = { styles.footer }>
                        <View style = { styles.favorite }>
                            <Text style = { styles.favorite }> Favorite </Text>
                        </View>
                        <View style = { styles.bookmark }>
                            <Text style = { styles.bookmarks }> Bookmarks </Text>
                        </View>
                        <View style = { styles.share }>
                            <Text style = { styles.share }> Share </Text>
                        </View>
                    </View>
                </View>
            </View>
        </ScrollView>
    );
  }
}

const styles = StyleSheet.create ({
    card: {
        backgroundColor: "#f9f9f9",
        flex: 1,
    },
    inner: {
        backgroundColor: "#001F54",
    },
    image: {
        flex: 1,
        height: undefined,
        width: undefined,
        maxHeight: 200,
        resizeMode: "contain",
    },
    title: {
        fontSize: 20,
        color: "#FEFCFB",
        textAlign: "center",
        paddingTop: 10,
        paddingBottom: 5,
        backgroundColor: "#1282A2"
    },
    excerpt: {
        fontSize: 16,
        color: "#FEFCFB",
        paddingTop: 5,
        paddingRight: 10,
        paddingBottom: 10,
        paddingLeft: 5
    },
    footer: {
        flexDirection: "row",
        height: 35,
        backgroundColor: "#1282A2",
        paddingTop: 10
    },
    favorite: {
        flex: 1,
        color: "#FEFCFB",
        justifyContent: "center",
        alignItems: "center"
    },
    bookmarks: {
        flex: 1,
        color: "#FEFCFB",
        justifyContent: "center",
        alignItems: "center"
    },
    share: {
        flex: 1,
        color: "#FEFCFB",
        justifyContent: "center",
        alignItems: "center"
    }
});

export default Card;

AppRegistry.registerComponent('Card', () => Card);

Answer 1

从样式中删除flex:1，然后根据自己的喜好重新设置样式。使用flex:1会使组件占用其父组件中的所有可用空间。

手动调整父级大小的示例为

image: {
    width: '90%',
    height: '90%',
}

在React-Native中将图像包含到特定块中

1 个答案: