react-native 中的动画展开/折叠文本包装器答案

【问题标题】：Animate Expand/Collapse text wrapper in react-nativereact-native 中的动画展开/折叠文本包装器
【发布时间】：2021-02-17 05:02:10
【问题描述】：

我是 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>

谁能帮帮我？

【问题讨论】：

标签： javascript reactjs react-native native

【解决方案1】：

大多数时候Animated 在宽度、不透明度等是预先知道的值的场景中效果很好。然而，在这种情况下，Text 的高度完全取决于身体的长度，这是一个难以计算的值。

根据我的经验，LayoutAnimation 在这些情况下效果最好，您只需在设置状态之前指出状态更改后将发生动画。 LayoutAnimation 解决剩下的问题。

查看documentation 了解更多信息。

要更新您的代码：

    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>
    );

【讨论】：