1

我有一个动画标题，当滚动视图向下滚动时，它会变小并且不透明度增加。在它下面有一个过滤器栏，在它完全夹紧后需要贴在动画标题的下方。我就是这样做的position:"absolute"，并使该视图遵循 y 值。问题是，当动画标题尚未完全夹紧时，它看起来很迟钝，而当它向上滚动时，它看起来更糟。最重要的是，滚动指示器隐藏在 position:'absolute' 过滤栏视图后面......我认为解决方案是让该视图具有相对位置，然后将其更改为绝对......但我需要知道是否有一种将样式更改为的position:"relative"方法position:"absolute"在它完成夹紧后，它看起来很光滑，直到它夹紧，或者至少有一种方法可以做到这一点而不会看起来滞后，任何帮助都是非常感谢的。这里有一些代码（一些标签可能没有关闭，但你明白了要点）：

constructor(props) {
    super(props);
    this.scrollY = new Reanimated.Value(0);
  }

render() {
    const translateY = multiply(min(this.scrollY, 0),-1);
    const headerHeight = this.scrollY.interpolate({
        inputRange: [0, HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT],
        outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
        extrapolate: Extrapolate.CLAMP
    });

this.NewHeaderHeight= this.scrollY.interpolate({
    inputRange: [0, HEADER_MIN_HEIGHT],
    outputRange: [0, HEADER_MIN_HEIGHT + 1],
    extrapolate: Extrapolate.CLAMP
});

const headerOpacity = this.scrollY.interpolate({
    inputRange: [0, HEADER_SCROLL_DISTANCE / 3, HEADER_SCROLL_DISTANCE],
    outputRange: [0, 0, 1],
    extrapolate: Extrapolate.CLAMP
});

return(<View style={{flex:1}}>
        {/* contenido */}
         <Reanimated.ScrollView 
            style={[{flex:1}]}
            bounces={false} 
            scrollEventThrottle={16}  
            onScroll={Reanimated.event([
            { nativeEvent: { contentOffset: { y: this.scrollY } } }
            ])}
        >
            {/* Start of animated HEADER */}
            <View style={{height: HEADER_MAX_HEIGHT, width:'100%'}}>

                {/* IMAGEN DEL HEADER Y ICONS*/}
                <ImageBackground style={{flex:1, justifyContent:'center' }} source={{uri: 'https://images.unsplash.com/photo-etc}}>

                //THERE WOULD BE SOME ICON AND OTHER CONTENT HERE DOESNT MATTER THOUGH
                </ImageBackground>
            </View>
*//there would be more children here doesnt matter either since filter toolbar is position:absolute for the moment*
 </Reanimated.ScrollView>

{/*THIS IS FILTERBAR (here is where want to change the position style depending on scroll value)*/}
<Reanimated.View
                style={[styles.categoryContainer, styles.shadow,  { transform: [{translateY}],position: 'absolute', top: headerHeight, elevation:1, backgroundColor:'white'}]}
            >
                 <FlatList 
                    horizontal
                    data={infoDataFilter}
                    showsHorizontalScrollIndicator={false}
                    renderItem={({item}) => (
                        <TouchableOpacity 
                            key={item.id}
                            style={[styles.categoryItem]}
                            activeOpacity={.7}
                            onPress={() =>  console.log(item.screen)}
                        >
                            <Text style={{paddingVertical: 5, fontSize:12, fontWeight:'bold', color: '#444444'}} >
                                {item.name.toUpperCase()}
                            </Text>
                        </TouchableOpacity>
                    )}
                />
</Reanimated.View>

这样做：

https://www.youtube.com/watch?v=4GdnkUEdmko

当该视图具有位置时，它可以完美滚动：'relative'，我希望它像那样，但是当动画标题已夹紧时更改为位置：'absolute'..

编辑：我正在使用 react native version .61.5 reanimated ^1.7.0，gesture-handler ^1.6.0，react navigation x4 库。这是在 android samsung Galaxy s6 devmode 上测试过的（在生产上也是一样的）

4

1 回答 1

0

我不认为改变position道具是一个好主意。要修复“滞后”行为，您可以useNativeDriver在您的动画上使用Animated.event并将动画移到本机端。它通常会创造奇迹。这是你如何做到的：

Reanimated.event( [{ nativeEvent: { contentOffset: { y: this.scrollY } } }], { useNativeDriver: true })

虽然，你必须确保你没有驱动任何布局动画（宽度、高度等），scrollY否则你会得到一个错误，因为这些是不受支持的。

编辑

我注意到您正在使用 scrollY 来驱动布局动画 ( headerHeight)。要使布局动画流畅，您必须使用LayoutAnimation. 这是一个非常好的图书馆。这是一个链接。

于 2020-03-07T19:45:11.090 回答