在反应原生的 "instagram-like" 新闻提要上浮动图像缩放

Question

我正在为现有的 React Native (0.63.4) 应用程序开发“类似 instagram”的新闻提要。在这个阶段，我使用 react-native-gesture-handler (1.10) 来处理 pinch/zoom 功能，使用它的 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 具有处理存储在变量中的 pinch/zoom 转换的所有代码：

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>

Answer 1

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

Answer 2

你可以使用这个：https://github.com/postillonmedia/react-native-instagram-zoomable

它是一个JS实现，所以你也可以根据需要修改代码。它将 view/image/component 缩放到屏幕上所有内容的上方。它创建元素的克隆并使用 PanGestures 缩放

在反应原生的 "instagram-like" 新闻提要上浮动图像缩放

Float an image zooming on an "instagram-like" news feed in react-native

react-native

react-native-gesture-handler