如何解决在react-native中设置动画扩展/折叠文本包装器
我是react-native开发人员的新手,我想在按下按钮后有一个简单的扩展/滑动高度效果,我尝试按照文档操作,但是Animation是react-native的工作真是可笑。
我的代码非常简单,我要设置动画的View是单击on.IsExpanded回调后,带有props.item.body的文本的View包装器。 这是视图:
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)' }}>{ props.item.body }</Text>
</View>
</View>
有人可以帮助我吗?
解决方法
大多数情况下,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)' }}>{ props.item.body }</Text>
</View>)}
</View>
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。