React Native中如何实现绿色视图隐藏后红色视图平滑占满空间（解决卡顿）

嘿，我完全懂你的困扰——在React Native 0.59.8这个版本里，处理高度变化的平滑动画确实容易碰到驱动不支持或者卡顿的问题，我来给你几个实用的解决方案：

方案1：使用LayoutAnimation（最推荐，流畅度拉满） #

LayoutAnimation是React Native自带的原生布局动画方案，它能自动处理布局变化的过渡效果，不用手动写属性动画，而且性能是原生级别的，完全不会卡顿。

具体步骤： #

1. 先导入模块，给Android开启实验支持（iOS默认支持，Android需要手动开启）：

import { LayoutAnimation, UIManager, Platform, View } from 'react-native';

componentDidMount() {
  if (Platform.OS === 'android') {
    // 开启Android的LayoutAnimation功能
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}

2. 用状态控制绿色视图的显示状态：

this.state = {
  isGreenViewVisible: true,
};

3. 写触发动画的函数：

hideGreenView = () => {
  // 配置动画效果，这里用内置的淡入淡出预设，也可以自定义动画参数
  LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
  this.setState({ isGreenViewVisible: false });
};

4. 在render里用状态控制高度：

render() {
  const { isGreenViewVisible } = this.state;
  return (
    <View style={{ flex: 1 }}>
      {/* 绿色视图 */}
      <View 
        style={{ 
          height: isGreenViewVisible ? 94 : 0, 
          backgroundColor: 'green',
          overflow: 'hidden' // 防止内容在高度收缩时溢出
        }}
      >
        {/* 绿色视图的内容 */}
      </View>
      {/* 红色视图用flex:1自动占满剩余空间 */}
      <View style={{ flex: 1, backgroundColor: 'red' }}>
        {/* 红色视图的内容 */}
      </View>
    </View>
  );
}

这个方案的优势在于动画由原生层面处理，不会占用JS线程资源，流畅度很高，代码也简洁。

方案2：优化Animated.timing的JS驱动动画 #

如果你一定要用Animated库手动控制高度动画，可以通过优化组件来缓解卡顿：

具体步骤： #

1. 初始化动画值：

import { Animated, Easing } from 'react-native';

this.state = {
  greenHeight: new Animated.Value(94),
};

2. 触发动画的函数（注意必须关闭useNativeDriver）：

hideGreenView = () => {
  Animated.timing(this.state.greenHeight, {
    toValue: 0,
    duration: 300,
    easing: Easing.inOut(Easing.ease),
    useNativeDriver: false, // height属于布局属性，不支持native驱动
  }).start();
};

3. 优化绿色视图的内容组件：
   把绿色视图的内容封装成PureComponent或者用React.memo包裹（React 16.8已经支持memo），避免动画过程中不必要的重渲染：

import React, { memo } from 'react';

const GreenContentView = memo(() => {
  return (
    {/* 绿色视图的具体内容 */}
  );
});

4. 在render里使用动画值：

render() {
  return (
    <View style={{ flex: 1 }}>
      <Animated.View 
        style={{ 
          height: this.state.greenHeight, 
          backgroundColor: 'green',
          overflow: 'hidden'
        }}
      >
        <GreenContentView />
      </Animated.View>
      <View style={{ flex: 1, backgroundColor: 'red' }}>
        {/* 红色视图内容 */}
      </View>
    </View>
  );
}

通过减少不必要的重渲染，能大幅缓解JS驱动动画的卡顿问题。

为什么之前的方案行不通？ #

• 用translationY动画：这属于transform变换，只会改变视图的视觉位置，不会修改布局空间，所以红色视图无法占据绿色视图原来的位置。
• 开启useNativeDriver: true做height动画：RN的native驱动只支持transform、opacity这类不影响布局的属性，height属于布局属性，所以会报错；关闭后用JS驱动，若组件复杂就容易卡顿，因为JS线程需要频繁计算并更新布局。

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