React native：android 上的平面列表上的图像叠加

Question

我正在尝试制作一个平面列表，其中包含图像以制作这样的轮播 enter image description here

起初，它在 IOS 上仍然可以正常工作。但是，图像将像这样叠加在 android 上的平面列表上：enter image description here

这是我的代码：

<FlatList
            style={{
              width: (Dimensions.get("window").width * 86.13) / 100,
              height: (Dimensions.get("window").height * 56.03) / 100,
              borderBottomLeftRadius: 50,
              borderWidth: 1,
              overflow: 'hidden'
            }}
            contentContainerStyle ={{borderBottomLeftRadius: 50, overflow: "hidden"}}
            horizontal
            pagingEnabled
            data={product.images}
            bounces={false}
            showsHorizontalScrollIndicator={false}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item, index }) => {
              return (
                <Image
                  resizeMode="cover"
                  style={{
                    width: (Dimensions.get("window").width * 86.13) / 100,
                    height: (Dimensions.get("window").height * 56.03) / 100,
                  }}
                  key={index}
                  source={item}
                />
              );
            }}
          />

我已经尝试在 contentContainerStyle 和样式上添加 overflow: 'hidden'，但它仍然无法正常工作。所以任何人都有答案，请帮助我。谢谢

Answer 1

这就像一个 android 限制。

解决方法是创建一个容器来包裹 FlatList 并使边缘变圆，然后传递溢出：'hidden'。

<View style={{
   width: (Dimensions.get("window").width * 86.13) / 100,
   height: (Dimensions.get("window").height * 56.03) / 100,
   borderBottomLeftRadius: 50,
   borderWidth: 1,
   overflow: 'hidden'
}}>
    <FlatList
            style={{
              width: (Dimensions.get("window").width * 86.13) / 100
            }}
            horizontal
            pagingEnabled
            data={product.images}
            bounces={false}
            showsHorizontalScrollIndicator={false}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item, index }) => {
              return (
                <Image
                  resizeMode="cover"
                  style={{
                    width: (Dimensions.get("window").width * 86.13) / 100,
                    height: (Dimensions.get("window").height * 56.03) / 100,
                  }}
                  key={index}
                  source={item}
                />
              );
            }}
       />
</View>

<div data-snack-id="@xyanz/flatlist-overflow" data-snack-platform="android" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#F9F9F9;border:1px solid var(--color-border);border-radius:4px;height:505px;width:100%"></div>
<script src="https://snack.expo.dev/embed.js"></script>

React native：android 上的平面列表上的图像叠加

React native: Image overlay on flatlist on android

android

react-native

react-native-flatlist