如何在React Native中实现商品详情可展开视图

核心实现逻辑为状态绑定容器高度，配合内置动画组件做平滑过渡，无需引入复杂第三方依赖，新手可直接复用。

效果参考 #

• 点击前收起状态
  
• 点击后展开状态
  

实现步骤 #

• 用useState存储视图的展开/收起状态
• 用Animated组件绑定容器高度，做高度变化的平滑动画
• 通过onLayout事件获取详情内容的完整渲染高度，作为展开后的目标高度
• 给详情容器绑定点击事件，点击时触发动画切换高度、更新展开状态

完整可运行代码 #

import React, { useState, useRef } from 'react';
import { View, Text, TouchableOpacity, Animated, ScrollView } from 'react-native';

const ProductDetailPage = () => {
  // 控制展开/收起状态，默认收起
  const [isExpanded, setIsExpanded] = useState(false);
  // 动画初始值对应收起状态高度，可根据设计稿调整，示例为100px
  const animatedHeight = useRef(new Animated.Value(100)).current;
  // 缓存详情内容的完整高度，避免重复计算
  const fullContentHeight = useRef(0);

  // 切换展开收起的触发方法
  const handleToggleDetail = () => {
    // 计算动画目标高度：展开时到完整内容高度，收起时回到初始高度
    const targetHeight = isExpanded ? 100 : fullContentHeight.current;
    Animated.timing(animatedHeight, {
      toValue: targetHeight,
      duration: 260, // 动画时长，200-300ms手感最佳
      useNativeDriver: false, // 高度类布局动画不支持原生驱动，必须设为false
    }).start();
    setIsExpanded(prev => !prev);
  };

  return (
    <ScrollView style={{ flex: 1, backgroundColor: '#ffffff' }}>
      {/* 页面其他模块：商品轮播、价格、标题、规格选择等可放在此处 */}
      <View style={{ paddingHorizontal: 16, paddingVertical: 20 }}>
        <Text style={{ fontSize: 17, fontWeight: '600', marginBottom: 12 }}>商品详情</Text>
        {/* 可点击的详情容器 */}
        <TouchableOpacity 
          activeOpacity={0.75} 
          onPress={handleToggleDetail}
          // 如果只需要点击一次展开、不需要收起，打开下面这行注释即可
          // disabled={isExpanded}
        >
          <Animated.View 
            style={{ 
              height: animatedHeight, 
              overflow: 'hidden',
              position: 'relative'
            }}
          >
            {/* 完整详情内容包裹层 */}
            <View 
              onLayout={(e) => {
                // 仅在首次渲染时获取完整内容高度，避免重复计算导致动画异常
                if (fullContentHeight.current === 0) {
                  fullContentHeight.current = e.nativeEvent.layout.height;
                }
              }}
            >
              {/* 此处替换为实际的商品详情内容，支持文本、图片、组件混排 */}
              <Text style={{ fontSize: 14, lineHeight: 22, color: '#333' }}>
                面料：100%精梳棉，亲肤透气不易起球
                {'\n'}尺码：S/M/L/XL，建议参考尺码表选择
                {'\n'}产地：浙江杭州
                {'\n'}洗涤说明：冷水手洗，避免长时间浸泡、暴晒
                {'\n\n'}产品特点：宽松版型不挑身材，走线工整耐穿，日常通勤、休闲外出均可搭配。
                {'\n\n'}售后说明：支持7天无理由退换，签收48小时内质量问题可申请免费退换，非质量问题退换需保证商品未拆吊牌、不影响二次销售。
                {'\n\n'}* 因拍摄光线、显示器色差等原因，商品颜色可能存在轻微偏差，属于正常情况。
              </Text>
            </View>

            {/* 此处可加收起状态的底部渐变遮罩，参考示例截图效果，需要额外安装react-native-linear-gradient依赖实现 */}
          </Animated.View>
          {/* 状态提示文字，不需要可删除 */}
          <Text style={{ textAlign: 'center', color: '#888', fontSize: 13, marginTop: 10 }}>
            {isExpanded ? '点击收起详情 ^' : '点击查看更多详情 v'}
          </Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
};

export default ProductDetailPage;

新手避坑提示 #

• 高度动画必须将useNativeDriver设为false，布局类样式动画不支持原生驱动，强制开启会直接报错。
• 如果详情内容包含网络图片，需要在图片加载完成的回调中重新触发一次高度计算，否则图片加载前获取的高度偏小，会导致展开后内容显示不全。
• 初始收起高度可根据设计稿调整，如果收起状态需要展示缩略图，把初始动画值调到对应高度即可。
• 如果需要实现示例截图里收起时底部的渐变遮罩效果，安装react-native-linear-gradient依赖后，在收起状态下将渐变层绝对定位在容器底部，高度设为30-40px，颜色从透明过渡到页面背景色即可。

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