Question

嘿伙计们我尝试使用列表视图@ shoutem / ui并且有问题！这是我的renderRow

代码

＆＃13;

renderRow(rowData, sectionId, index) {
        const cellViews = rowData.map((channel, id) => {
            return (
                <TouchableOpacity key={id} styleName="flexible">
                    <Tile styleName="small clear">
                        <Image
                            styleName="medium-square rounded-corners"
                            source={{ uri: channel.defaultImage }}
                        />
                        <View styleName="content">
                            <Subtitle numberOfLines={3}>{channel.name}</Subtitle>
                            <View styleName="horizontal">
                                <Caption styleName="collapsible" numberOfLines={2}>{channel.status}</Caption>
                            </View>
                        </View>
                    </Tile>
                </TouchableOpacity>
            );
        });
        return (
            <GridRow columns={3}>
                {cellViews}
            </GridRow>
        );
    }

＆＃13;

并在函数render（）中我定义了1个groupsData，如： const groupedData = GridRow.groupByRows（this.state.dataArr，3）;

但我的结果并不好！行中的图像与近行冲突喜欢这张图片！请帮助我一些解决方案可以解决这个问题！我在教程中尝试所有风格的图像，但仍然无法正常工作:( 这是我的面孔：

enter image description here

Answer 1

最好为项目设置宽度和高度。

例如， style={{width : screenWidth / 3, height: screenWidth / 3 }}.

默认情况下，Gridview不会为您实现水平滚动视图，因此当您的总宽度超过screenWidth时，它们将发生冲突。

另一种方法可能有效：您可以将每一行视为另一个列表视图进行渲染，但我没有尝试过。

Answer 2

问题是因为您在Image上使用“medium-square”styleName。 styleName将图像高度和宽度明确定义为145像素。因此，如果您的屏幕宽度小于435，图像将重叠。上面建议的解决方案是正确的，或者您可以使用其他一些可以渲染较小图像的styleName，例如“small”。

如何使用内容包装@ shoutem / ui制作网格视图3行

2 个答案: