Question

我已经访问了许多网站并阅读了许多文章，但找不到任何解决方案。我想要其中每行包含两个图像的ui。我通过在每个新行中添加视图标签来完成此操作，但是我想在一个视图标签中进行添加。请帮助

JScrollPane sp = new JScrollPane (textArea,JScrollPane.VERTICAL_SCROLLBAR_ALWAYS,JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS);

I want like this but in single View tag

Answer 1

您可以执行以下操作：

从react-native导入尺寸，这里的想法是给“视图”一个宽度占手机屏幕尺寸的百分比，然后给图像“视图”一个百分比，以提供您想要的内容。例如，如果我想连续显示三幅图像，我可以给View设置90％的宽度，然后将flexWrap：wrap换成一个，并将其中的每幅图像的宽度设置为30％，这样它只能连续包含3张图像

您可以针对自己的情况执行以下操作。

import {  Dimensions } from 'react-native';
const { width, height } = Dimensions.get('screen');

// inside your render or return
<View style={{ width: width * 0.9, display: "flex", flexDirection: "row", flexWrap: "wrap", alignContent: "center", alignItems: "center", justifyContent: "center" }}>
    <Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
    <Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
    <Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
    <Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
</View>

或者如果您需要将其放入列表中，则可以执行以下操作：

numColumns = {2} //您需要在此处指定列数

 <FlatList
        style={styles.dashboard}
        data={this.categories}
        renderItem={this.renderItem}
        keyExtractor={item => item.id}
        numColumns={2}
    />

连续渲染两幅图像

1 个答案: