0

嘿伙计们，我尝试使用列表视图@shoutem/ui 并对此有疑问！这是我的 renderRow 代码

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

并且在函数 render() 我定义了 1 个分组数据，例如： const groupedData = GridRow.groupByRows(this.state.dataArr, 3);

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

在此处输入图像描述

4

2 回答 2

2

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

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

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

另一种方法可能有效：您可以将每一行视为另一个要呈现的列表视图，但我没有尝试。

于 2017-04-26T05:43:34.820 回答
0

问题是因为您在 Image 上使用了“中方形”样式名。该 styleName 将图像高度和宽度明确定义为 145 像素。因此，如果您的屏幕宽度小于 435，图像会重叠。上面建议的解决方案是正确的，或者您可以使用其他一些可以呈现较小图像的 styleName，例如“small”。

于 2017-04-26T09:37:49.813 回答