React Native动画：嵌套ScrollView后如何修改父View高度

Hey there! I’ve run into a similar issue before when working with animated scroll views and nested components, so let’s break down how to get your parent View’s height to update based on the ScrollView’s scroll event.

The Core Issue #

When you nest a ScrollView inside a regular View, the parent View doesn’t automatically receive the ScrollView’s onScroll events—those are only handled by the ScrollView itself. To adjust the parent’s height, you need to share the scroll offset data from the ScrollView with the parent’s animation logic.

Step-by-Step Solution #

1. Set Up Animated Values for Both Scroll and Parent Height

First, define two animated values in your component state: one for tracking scroll offset, and another for controlling the parent View’s height:

state = {
  scrollAnim: new Animated.Value(0),
  parentViewHeight: new Animated.Value(600), // Your initial parent height
};

2. Modify the ScrollView’s onScroll Handler

Instead of only linking the scroll offset to scrollAnim, add a listener to the Animated.event that updates the parent’s height based on how far the user has scrolled. Also, note that you can’t use useNativeDriver for layout properties like height, so we’ll set that to false:

<ScrollView
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.scrollAnim } } }],
    {
      useNativeDriver: false,
      listener: (event) => {
        const scrollY = event.nativeEvent.contentOffset.y;
        // Calculate the new parent height (adjust the logic to fit your needs)
        // Example: Shrink parent height as we scroll down, stop at a minimum height
        const minHeight = 300;
        const maxHeight = 600;
        const newHeight = Math.max(minHeight, maxHeight - scrollY);
        
        // Update the parent height animated value
        Animated.timing(this.state.parentViewHeight, {
          toValue: newHeight,
          duration: 0, // Instant update to match scroll speed
          useNativeDriver: false,
        }).start();
      },
    }
  )}
  scrollEventThrottle={16} // Ensure smooth updates (matches 60fps)
>
  {/* Your ScrollView content here */}
</ScrollView>

3. Convert the Parent View to an Animated Component

Wrap your parent View with Animated.View so it can respond to the animated height value:

<Animated.View
  style={{
    height: this.state.parentViewHeight,
    // Add any other parent View styles you need
  }}
>
  {/* Your nested ScrollView goes here */}
</Animated.View>

Key Notes #

• scrollEventThrottle={16}: This ensures the scroll event fires every 16ms (60 times per second), making the height adjustment feel smooth instead of jumpy.
• Animation Logic Flexibility: Tweak the newHeight calculation to match your desired behavior—whether you want the parent to shrink gradually, snap at certain scroll positions, or expand when scrolling up.
• Avoid useNativeDriver for Layout: Native driver animations don’t support changes to layout properties like height or width, so always set useNativeDriver: false when modifying those.

Why Your Original Approach Didn’t Work #

Your initial onScroll only updated the ScrollView’s internal animation value, but there was no link between that value and the parent View’s height. By adding a listener to the scroll event, you’re bridging that gap and telling the parent View how to adjust based on user scrolling.

内容的提问来源于stack exchange，提问作者Univers3