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

Question

我正在构建我的第一个 react-native 应用程序，但在使用 flex 构建的 5 列布局中渲染图像时遇到问题。在 web 上，我会通过给它们容器 100% 的宽度并添加 margin 0 auto 来使图像响应。这在 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;

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

Answer 1

使用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>
    );
}