Javascript 在react native中设置展开/折叠文本包装的动画

我是react native开发者的新手，我想在按下一个按钮后有一个简单的展开/滑动高度效果，我试着按照文档进行操作，但动画是react native是完全荒谬的

我的代码非常简单，我要设置动画的视图是在单击onIsExpanded回调后使用props.item.body围绕文本的视图包装。 这是一种观点：

const [ isExpanded, setIsExpanded ] = useState(false);
    const [ maxHeight, setMaxHeight ] = useState(null);
    const [ minHeight, setMinHeight ] = useState(null);
    const [ animation, setAnimation ] = useState(new Animated.Value());
   

    const toggleIsExpanded = () => 
    {
        setIsExpanded(!isExpanded);
    };


<View style={{ width:'100%', flexDirection:'column', position:'relative',}}>
                    <TouchableOpacity style={{ width:'100%', height:50}} onPress={ toggleIsExpanded }>
                        <EntypoIcon name="chevron-small-down" style={{ color:'rgb(68,68,68)', fontSize:20 }}/>
                    </TouchableOpacity>
                    {//How to expand/collapse this?}
                    <View style={{ width:'100%', padding:10 }}>
                        <Text style={{ fontSize:14, color:'rgb(68,68,68)' }}>{ props.item.body }</Text>
                    </View>
                </View>

const[isExpanded，setIsExpanded]=useState（false）；
const[maxHeight，setMaxHeight]=useState（null）；
const[minHeight，setMinHeight]=useState（null）；
const[animation，setAnimation]=useState（新的Animated.Value（））；
常量toggleIsExpanded=（）=>
{
setIsExpanded（！isExpanded）；
};
{//如何展开/折叠此文件？}
{props.item.body}

---

任何人都可以帮我吗？

大多数情况下，在场景中，宽度、不透明度等都是预先知道的值，动画效果很好。然而，在这种情况下，

文本的高度

完全取决于主体的长度，这是一个难以计算的值

根据我的经验，

layoutaimation

在这些场景中效果最好，您只需在设置状态之前指出，状态更改后将发生动画<代码>布局动画计算出其余部分

有关更多信息，请查看

要更新代码，请执行以下操作：

    const defaultAnimation = {
      duration: 200,
      create: {
        duration: 200,
        type: LayoutAnimation.Types.easeInEaseOut,
        property: LayoutAnimation.Properties.opacity,
      },
      update: {
        type: LayoutAnimation.Types.easeInEaseOut,
      },
    };


    const [ isExpanded, setIsExpanded ] = useState(false);
    const [ maxHeight, setMaxHeight ] = useState(null);
    const [ minHeight, setMinHeight ] = useState(null);
   

    const toggleIsExpanded = () => 
    {
        // This will make sure an animation is trigger after toggling
        LayoutAnimation.configureNext(defaultAnimation);
        setIsExpanded(prev => !prev);
    };

    return (
       <View style={{ width:'100%', flexDirection:'column', position:'relative',}}>
           <TouchableOpacity style={{ width:'100%', height:50}} onPress={ toggleIsExpanded }>
               <EntypoIcon name="chevron-small-down" style={{ color:'rgb(68,68,68)', fontSize:20 }}/>
           </TouchableOpacity>
           {//How to expand/collapse this?}
           {!!expanded && (
           <View style={{ width:'100%', padding:10 }}>
               <Text style={{ fontSize:14, color:'rgb(68,68,68)' }}>{ props.item.body }</Text>
           </View>)}
       </View>
    );

const defaultAnimation={
持续时间：200，
创建：{
持续时间：200，
类型：LayoutImation.Types.easeInEaseOut，
属性：layoutimation.Properties.opacity，
},
更新：{
类型：LayoutImation.Types.easeInEaseOut，
},
};
常量[isExpanded，setIsExpanded]=useState（false）；
const[maxHeight，setMaxHeight]=useState（null）；
const[minHeight，setMinHeight]=useState（null）；
常量toggleIsExpanded=（）=>
{
//这将确保在切换后触发动画
LayoutImation.configureNext（默认动画）；
setIsExpanded（prev=>！prev）；
};
返回(
{//如何展开/折叠此文件？}
{！！扩展&&(
{props.item.body}
)}
);