javascript - 在不知道原始大小的情况下 React Native Redux Animate 视图高度
问题描述
我想为具有动态高度的视图设置动画,例如手风琴菜单。
class Accordeon extends Component {
constructor(props) {
super(props);
this.state = {
ViewScale: new Animated.Value(0),
chevronDeg: new Animated.Value(0),
expanded: false,
height: 0,
};
}
render() {
const ViewDegValue = this.state.ViewScale.interpolate({
inputRange: [0, 50, 100],
outputRange: ['0deg', '90deg', '180deg']
});
return(
<View>
<TouchableOpacity
style={[accordionStyles.header]}
onPress={() => {
this.setState({expanded:!this.state.expanded});
Animated.parallel ([
Animated.timing(
this.state.chevronDeg,
{
toValue: !this.state.expanded ? 0 : 100,
duration: 200,
}
),
Animated.timing(
this.state.ViewScale,
{
toValue: this.state.expanded ? 0 : 100,
duration: 200,
}
)
]).start();
}}
>
<Text
style={[accordionStyles.header__text, styles.headline__h2]}
>
{this.props.headerLabel}
</Text>
<Animated.View
style={{
transform: [
{rotateZ: ViewDegValue}
]
}}>
<FontAwesome
iconStyle={[accordionStyles.header__icon,]}
name={"chevron-down"}
size={30}
>
</FontAwesome>
</Animated.View>
</TouchableOpacity>
<Animated.View
onLayout={(event) => {
var {x, y, width, height} = event.nativeEvent.layout;
this.setState({height:height})
}}
style={[
this.state.expanded ? accordionStyles.content__hidden : accordionStyles.content__show,
accordionStyles.content,
{
**** this code below ****
// height: this.state.ViewScale.interpolate({
// inputRange: [0, 25, 50, 75, 100],
// outputRange: [0, 75, 150, 225, this.state.height]
// }),
transform: [
{translateY: - this.state.height / 2},
{scaleY: this.state.ViewScale.interpolate({
inputRange: [0, 25, 50, 75, 100],
outputRange: [0, .5, 0.75, 0.9, 1]
})},
{translateY: this.state.height / 2}
]
}
]}
>
{this.props.children}
</Animated.View>
</View>
);
}
}
我的问题是,如果激活此代码,手风琴不是全尺寸,只有 224.*px,因为在布局上无法获得全尺寸,并且如果我将高度设置为自动。只需缩放视图,如果手风琴关闭了它们之间的巨大差距,因为没有设置 0 高度。我不会将每个手风琴的绝对和不透明元素放在任何无法解决的地方。
解决方案
我找到了自己的解决方案。我将 onLayout 添加到标题和内容中,但不对整个组件的内容高度设置动画,因此内容具有其原始大小,但我必须将初始 headerHeight 设置为更大,然后在第一次加载时设置它自我恢复到原来的大小。没问题,因为 headerHeight 不是动态的,只有 contentHeight。
<Animated.View
style={[
accordionStyles.accordeon,
{height: this.state.ViewScale.interpolate({
inputRange: [0, 25, 50, 75, 100],
outputRange: [this.state.headerHeight, 75, 150, 225, this.state.headerHeight
+ this.state.contentHeight]
}),}
]}
>
推荐阅读
- python - 如何删除多个文本通道?
- python - 将变量附加到泡菜文件并读取它们
- python - 有没有办法将方程作为字符串传递给 Python 函数?
- angular - E:/project/ 超出最大预算中的错误
- c++ - 我遵循了 CUDA 教程,但我的 GPU 计算时间比我的 CPU 时间长得多?
- reactjs - 必应地图在反应。如何在地图上单独的可滚动框中将固定位置显示为列表?我找不到它的文档
- r - 使用 httr 发布请求
- swift - 无法转换“ReversedCollection”类型的值
' 到预期的参数类型 '[String.Element]' (又名 'Array ') - php - 无法在 Ubuntu 上连接到 MySQL 服务器
- python - Django 上下文渲染 - django.template.base.VariableDoesNotExist:查找键失败