reactjs - 如何动态设置高度为动画后动画值的组件的高度?
问题描述
目标:有一个下拉视图,随着时间的推移动画高度扩展。需要注意的是:一旦视图被展开,它需要能够动态地处理是否存在额外的视图数据。如果存在,将呈现几个额外的文本组件。
问题:就目前而言,动画父级的高度为固定高度。因此,当additionalContent
渲染时,它超出了高度固定的父级的边界。我不想明确设置父级的高度,因为那样我就无法按照我想要的方式为该方面设置动画。我想保持高度动画原样,以及动态调整父级以在additionalContent
存在时包含子级
const ListItem = (props) => {
const [checkInModal, setCheckInModal] = useState(false);
const [animatedHeight, setAnimatedHeight] = useState(new Animated.Value(0))
const [animatedOpacity] = useState(new Animated.Value(0))
const [dynamicHeight, setDynamicHeight] = useState(0);
const [expanded, setExpanded] = useState(false);
const toggleDropdown = () => {
if (expanded == true) {
// collapse dropdown
Animated.timing(animatedHeight, {
toValue: 0,
duration: 200,
}).start()
} else {
// expand dropdown
Animated.timing(animatedHeight, {
toValue: 100,
duration: 200,
}).start()
}
setExpanded(!expanded)
}
const renderAdditionalContent = () => {
setDynamicHeight(75);
if (someVariable == true) {
return (
<View> <Text> Some Content </Text> </View>
)
}
}
const interpolatedHeight = animatedHeight.interpolate({
inputRange: [0, 100],
outputRange: [75, 225]
})
const interpolatedOpacity = animatedOpacity.interpolate({
inputRange: [0, 100],
outputRange: [0.0, 1.0]
})
return (
<Animated.View
style={[styles.container, { height: interpolatedHeight + dynamicHeight }]}
>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', }}>
<View style={styles.leftContainer}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text style={styles.title}>{props.title}</Text>
</View>
<Text style={styles.subtitle}>{time()}</Text>
</View>
<View style={styles.rightContainer}>
<TouchableOpacity onPress={() => toggleDropdown()} style={styles.toggleBtn}>
<Image source={require('../assets/img/chevron-down.png')} resizeMode={'contain'} style={styles.chevron} />
</TouchableOpacity>
</View>
</View>
{expanded == true ? (
<Animated.View style={[styles.bottomContainer, { opacity: interpolatedOpacity }]}>
<Components.BodyText text="Subject:" style={{ fontFamily: Fonts.OPENSANS_BOLD }} />
<Components.BodyText text={props.subject} />
{ renderAdditionalContent() }
</Animated.View>
) : null}
</Animated.View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
borderRadius: 25,
width: width * 0.95,
marginBottom: 5,
marginHorizontal: 5,
paddingVertical: 15,
paddingHorizontal: 15
},
leftContainer: {
justifyContent: 'space-between',
},
rightContainer: {
flexDirection: 'row',
alignItems: 'center'
},
title: {
fontFamily: Fonts.OPENSANS_BOLD,
fontSize: 20,
color: '#454A66'
},
subtitle: {
color: '#454A66',
fontSize: 14
},
typeIcon: {
height: 25,
width: 25
},
chevron: {
height: 15,
width: 15
},
toggleBtn: {
borderWidth: 1,
borderColor: Colors.PRIMARY_DARK,
borderRadius: 7,
paddingTop: 4,
paddingBottom: 2.5,
paddingHorizontal: 4,
marginLeft: 10
},
bottomContainer: {
marginVertical: 20
},
buttonContainer: {
flexDirection: 'row',
width: 250,
justifyContent: 'space-between',
alignSelf: 'center',
marginVertical: 20
},
noShadow: {
elevation: 0,
shadowOffset: {
width: 0,
height: 0
},
shadowRadius: 0,
}
});
export default ListItem;
如何实现?到目前为止,我尝试创建一个状态变量dynamicHeight
并将其设置在呈现附加内容的函数中,但这没有奏效。
这是小吃:https ://snack.expo.io/P6WKioG76
澄清编辑:renderAdditionalContent 函数呈现附加内容(显然),该内容可以是从一行字符到多行的任何地方。无论字符数如何,组件的主父容器都需要将所有子容器都放在其范围内。就目前而言,如果附加内容渲染的内容过多,则内容会溢出组件的主父容器的边框,这是必须避免的。显然,这可以通过简单地不给主组件容器指定高度来完成。但我们的想法是拥有动画高度并正确包装子内容
有什么建议么?
解决方案
编辑:简单易行的方法
您也可以应用 height 100%
,这样我们就不需要计算内部内容的高度,它将根据提供的内容自动调整
const interpolatedHeight = animatedHeight.interpolate({
inputRange: [0, 100],
outputRange: ["0%", "100%"] // <---- HERE
})
为了实现这一点,我在<View>
周围添加了标签<Animated.View>
以获得正确的高度100%
和 css 的少量更改,这看起来更优雅,并为您的问题提供了完美的解决方案。
所以,你可以使用onLayout
计算完布局后立即触发此事件
第一步:
// setHeight
const setHeight = (height) => {
setDynamicHeight(prev => prev + height);
}
<View onLayout={(event) => {
var { x, y, width, height } = event.nativeEvent.layout;
setHeight(height); // <--- get the height and add it to total height
}}>
<Text>Subject</Text>
<Text>Subject Content</Text>
{renderAdditionalContent()}
</View>
第二步:
useEffect(() => {
// trigger if only expanded
if (expanded) {
// trigger height animation , whenever there is change in height
Animated.timing(animatedHeight, {
toValue: dynamicHeight, // <--- animate to the given height
duration: 200,
}).start();
}
}, [dynamicHeight]); // <--- check of height change
工作演示(您可以通过添加删除文本来测试它)
推荐阅读
- java - 在鼠标按下事件中启动“asyncExec”会导致阻塞行为
- statistics - 因变量对于某些组是恒定的
- excel - 如何在真正的空白单元格上进行查找和替换
- c# - 如何从 Unity 中的自定义编辑器脚本修改序列化变量
- python - 如何从字符串中仅获取子字符串的第一个实例?
- node.js - 通过 Intranet 为 Xbox 托管节点应用程序时需要特定域名
- geohashing - 为什么 geohashes 不是完美的正方形?
- python - 使用 Virtualenv 配置 Flask 和 WSGI
- c# - FileHelpers - DelimitedClassBuilder 不能使用它
- c# - C# object to list c#