React Native 如何以 5 列布局呈现图像

Question

我正在构建我的第一个 react-native 应用程序，但在使用 flex 构建的 5 col 布局内渲染图像时遇到了问题。在 web 上，我会通过为图像提供 100% 的容器宽度并自动添加边距 0 来使图像具有响应性。这不适用于 react-native，所以我想知道它们是否是不同的设计原则，用于如何使 react-native 响应移动和平板电脑应用程序？

import React, { Component } from 'react';
import { Image } from 'react-native';
import { Text, Container, Content, View } from 'native-base';

class Question extends Component {
    render() {
        const {
            widgetPredictor,
            widgetPredictor__text,
            widgetPredictor__imgs,
            widgetPredictor__heading,
            widgetPredictor__count,
            widgetPredictor__img__result,
            widgetPredictor__img__arrow,
            widgetPredictor__img__size
        } = styles;

        const { question, index, total, showPreviousQuestion, showNextQuestion } = this.props;

        return (
            <Container>
                <Container style={[widgetPredictor, widgetPredictor__text]}>
                    <Text style={widgetPredictor__heading}>{ question.label }</Text>
                    <Text style={widgetPredictor__count}>{ index + 1 } of { total }</Text>
                </Container>
                <Container style={[widgetPredictor, widgetPredictor__imgs]}>
                    <View style={widgetPredictor__img__arrow}>
                        <Image
                            style={widgetPredictor__img__size}
                            source={require('../../assets/imgs/left.png')}
                        />
                    </View>
                    <View style={widgetPredictor__img__result}>
                        <Image
                            style={widgetPredictor__img__size}
                            source={require('../../assets/imgs/Huddersfield.png')}
                        />
                    </View>
                    <View style={widgetPredictor__img__result}>
                        <Image
                            style={widgetPredictor__img__size}
                            source={require('../../assets/imgs/Draw.png')}
                        />
                    </View>
                    <View style={widgetPredictor__img__result}>
                        <Image
                            style={widgetPredictor__img__size}
                            source={require('../../assets/imgs/Wednesday.png')}
                        />
                    </View>
                    <View style={widgetPredictor__img__arrow}>
                        <Image
                            style={widgetPredictor__img__size}
                            source={require('../../assets/imgs/right.png')}
                        />
                    </View>
                </Container>
            </Container>
        );
    }
}

const styles = {
    widgetPredictor: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        height: 108
    },
    widgetPredictor__text: {
        backgroundColor: "red"
    },
    widgetPredictor__imgs: {
        backgroundColor: "blue"
    },
    widgetPredictor__heading: {
      color: "#141414",
      fontFamily: "Avenir",
      fontSize: 12,
      fontWeight: "500",
      marginBottom: 10,
        paddingLeft: "3%",
        paddingRight: "3%"
    },
    widgetPredictor__count: {
      color: "#C8D6DE",
      fontFamily: "Avenir",
      fontSize: 8,
      fontWeight: "900",
      marginBottom: 10,
        paddingLeft: "3%",
        paddingRight: "3%"
    },
    widgetPredictor__img__result: {
        borderRadius: 100,
        paddingLeft: "3%",
        paddingRight: "3%",
        flex: 2
    },
    widgetPredictor__img__arrow: {
        paddingLeft: "3%",
        paddingRight: "3%",
        flex: 1
    },
    widgetPredictor__img__size: {
        height: 70,
        width: 70
    }
};

export default Question;

我只能通过指定高度和宽度来渲染整个图像，我无法让它们动态填充它们的容器。这在平板电脑上很好，但 imgs 在移动设备上重叠

Answer 1

您可以使用 react native 中的 Dimensions 元素来计算所需的图像宽度/高度，以获取窗口宽度。

const {height, width} = Dimensions.get('window');
const myImageWidth = width / 5;

Answer 2

使用resizeMode='contain':

const styles = StyleSheet.create({
    image: {
        flex: 1,
    }
});

render() {
    let mode = 'contain';
    return (
        <View style={{flexDirection: 'row', height: 100}}>
            <Image source={imageClose} resizeMode={mode} style={styles.image} />
            <Image source={imageClose} resizeMode={mode} style={styles.image} />
            <Image source={imageClose} resizeMode={mode} style={styles.image} />
            <Image source={imageClose} resizeMode={mode} style={styles.image} />
            <Image source={imageClose} resizeMode={mode} style={styles.image} />
            <Image source={imageClose} resizeMode={mode} style={styles.image} />
            <Image source={imageClose} resizeMode={mode} style={styles.image} />
        </View>
    );
}