在 react-native 中浮动放大“类似 instagram”的新闻提要的图像

Posted 2023-02-19

【中文标题】在 react-native 中浮动放大“类似 instagram”的新闻提要的图像

【英文标题】：Float an image zooming on an "instagram-like" news feed in react-native

【发布时间】：2021-06-08 00:38:37

【问题描述】：

我正在为现有的 react native (0.63.4) 应用程序开发“类似 instagram”的新闻提要。在这个阶段，我使用react-native-gesture-handler (1.10) 来处理捏合/缩放功能，使用它的PinchGestureHandler 和FlatList 实现。

我有一个用于滚动新项目的外部垂直平面列表，对于每个项目，我有一个用于左右滚动图像的内部水平平面列表。

如果我内联缩放图像，那么它可以正常工作，但由于必须重新布局所有其他项目，它有点慢。

我想做的是将图像“浮动”在其他所有内容之上，然后在缩放后快速恢复。我可以做所有这些，除了浮动图像。我试过在整棵树上设置overflow:'visible'，但它没有帮助zIndex 和elevation 似乎也没有帮助。

在视觉上我想（有点）在缩放时弹出图像，然后它可以在最后恢复。我该怎么做？

--实现细节： 提要只是NewsItem 的数组：

interface NewsItem 
    id: string,
    title: string,
    images: NewsImage[],
    datePublished: Date

interface NewsImage 
    id: string,
    uri: string,
    width: number,
    height: number,
    ref: RefObject<PinchGestureHandler>

imageRefs 是所有图像的平面参考列表。

主要布局是这样的（略简化）：

<View>
    <FlatList 
        waitFor=imageRefs
        data=newsFeed
        keyExtractor=item => item.id
        renderItem=(item) => <NewsItem item=item />  />
</View>    

NewsItem

<View>
    <Text>props.item.title</Text>
    <FlatList
        horizontal=true 
        waitFor=props.item.images.map(img => img.ref)
        data=props.item.images
        keyExtractor=img => img.id
        renderItem=(item) => <NewsImage info=item />
    />
</View>

NewsImage 将处理捏合/缩放变换的所有代码存储在变量中：

scale scaledWidth scaledHeight xScaledTranslate yScaledTranslate 与布局：

<View style=
                width: info.width * minScale, 
                height: info.height * minScale, 
                position: 'relative',
            >
    <Animated.View style=
            position:'absolute', 
            overflow:'visible',
            width:scaledWidth,
            height:scaledHeight,
    >
        <PinchGestureHandler 
            onGestureEvent=pinchGestureEventHandler
            onHandlerStateChange=pinchStateEventHandler
            ref=ref
            >
            <Animated.Image
                defaultSource=require('../Shared/assets/logos/bootsplash_logo.png')
                source=info
                style=
                        width: info.width,
                        height: info.height,
                        overflow:"visible",
                        transform: [
                            translateX: xScaledTranslate,
                            translateY: YScaledTranslate,
                            scale: scale,
                        ]
                     
                resizeMode='cover'
                />
        </PinchGestureHandler>
    </Animated.View>
</View>

【参考方案1】：

我不知道你是否解决了这个问题，但你不能用 FlatList 做到这一点。 我遇到了类似的问题并解决了将我的 FlatList 转换为 ScrollView

【讨论】：

是的，但感谢您的回复。你是对的，你就是做不到。最终，我在顶层放置了一个正在寻找捏合手势的控件，当它得到它时，它找到了手势下的图像，在顶层渲染它并从那里开始。有相当大的麻烦，但最终效果很好。

嗯，这听起来很有趣。你能和我分享更多信息或一些代码吗？因为在我的情况下，我已将平面列表转换为滚动视图，但滚动视图的性能并不好