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

Question

大家好，我尝试使用列表视图@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 个 groupedData，例如： 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

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

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

How can i made gird view 3 row with content wrap @shoutem/ui

react-native

shoutem