Question

这里有问题。本质上是尝试为轻按按钮时弹出的模式创建动画。

因为我在应用程序中有一个标签栏，所以要让模式弹出到标签栏上，我需要将Animated Component包裹在Modal中（或者我可能不这样做？知道其他解决方案会很好）。这意味着当我切换动画时，我也想切换局部状态以获取模态的可见性。

但是，当我按下按钮时，组件会通过redux更新并调用toggleModal函数-包含this.setState(prevState => ({ modalVisible: !prevState.modalVisible }))会以某种方式导致重复调用setState。

我让动画在没有useNativeDriver并且没有标签栏（因此不需要模态组件来包装动画）的一次性博览会应用程序中工作。

我如何开始解决此问题？

AddCircleModal：

const screenHeight = Dimensions.get("window").height

class AddCircleModal extends React.Component {
    state = {
        top: new Animated.Value(screenHeight),
        modalVisible: false
    }

    componentDidUpdate() {
        ('modalDidUpdate')
        this.toggleModal()
    }

    toggleModal = () => {
    console.log('toggled')
    this.setState(prevState => ({ modalVisible: !prevState.modalVisible })) //if I have this line I'm getting 'maximum update depth exceeded' error
        if (this.props.action === 'openModal') {
            Animated.spring(this.state.top, {
                toValue: 174,
                useNativeDriver: true
            }).start()
        }
        if (this.props.action === 'closeModal') {
            Animated.spring(this.state.top, {
                toValue: screenHeight,
                useNativeDriver: true
            }).start()
    }
}


    render() {
        return (
            <Modal
             transparent={true}
             visible={this.state.modalVisible}
             >
                 <AnimatedContainer style={{scaleY: this.state.top}}>
                    <TouchableOpacity
                            onPress={this.props.closeModal}
                            style={{ position: "absolute", top: 120, left: "50%", marginLeft: -22, zIndex: 1 }}
                     >
                        <Text>GO</Text>
                    </TouchableOpacity>
                 </AnimatedContainer>
            </Modal>
        )
    }
}

const Container = styled.View`
    position: absolute;
    background: white;
    width: 100%;
    height: 100%;
    z-index: 100;
    border-radius: 22px;
`

const AnimatedContainer = Animated.createAnimatedComponent(Container)

function mapStateToProps(state) {
    return { action: state.action }
}

function mapDispatchToProps(dispatch) {
    return {
        closeModal: () =>
            dispatch({
                type: "CLOSE_MODAL"
            })
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(AddCircleModal)

超过最大更新深度-将动画组件包装在模态中？

0 个答案: