React Native Redux 在不知道原始大小的情况下动画视图高度

Question

我想为具有动态高度的视图设置动画，例如手风琴菜单。

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 高度。 我不会将每个手风琴的绝对和不透明元素放在任何无法解决的地方。

Answer 1

我找到了自己的解决方案。 我将 onLayout 添加到 header 和内容中，但不对整个组件的内容的高度进行动画处理，因此内容具有其原始大小，但我必须将初始 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]
    }),}
  ]}
>