1

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

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

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

我想做的是将图像“浮动”在其他所有内容之上，然后在缩放后恢复。我可以做所有这些，除了浮动图像。我试过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>
4

1 回答 1

1

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

于 2021-08-19T11:25:40.127 回答