0

状态改变后如何阻止反应动画重新激活？我在 Animated.View 中有一个 textInput，在 OnChangeText 后，动画会重新运行。

这是动画视图的代码，它从屏幕顶部向下滚动视图，并在状态更改时将其向下移动到屏幕上。

textInput 在这个动画视图中，但是当我输入一些东西时，动画再次运行！

我尝试从 UseEffect 中删除 pageLevel 依赖项并没有帮助，我认为一旦其中一个状态发生变化，应用程序就会重新运行每个状态，这使得它可以重新激活整个页面，在这种情况下，我该如何解决这个问题？

在此处输入图像描述

动画视图代码：

//ROLL IN ROLL OUT
const RollUpDownView = (props:any) => {

    //COMING IN
    if (pageLevel == props.index){
        if(pageLevel < previousPageLevel){
            var from = 1000
            var to = 0
        }
        if(pageLevel > previousPageLevel){
            var from = -1000
            var to = 0
        }
    }

    //GOING OUT
    if(props.index != pageLevel ){
        if(pageLevel > previousPageLevel){
            var from = 0
            var to = 1000
        }
        if(pageLevel < previousPageLevel){
            var from = 0
            var to = -1000 
        }
    }

    const rollAnim = useRef(new Animated.Value(from)).current  // Initial value

    React.useEffect(() => {
        Animated.timing(
            rollAnim,
            {
                toValue: to,
                duration: 1000,
                useNativeDriver:false,
            }
        ).start();
    }, [pageLevel])
    

    return (
        <Animated.View                 
            style={{
            ...props.style,
                top: rollAnim,         
            }}
        >
            {props.children}
        </Animated.View>
    );
}

并且 textInput 在里面：

                            <RollUpDownView index={1}>
                                <TextInput  
                                    styles={styles.textInputStyle}
                                    text='Full Name' 
                                    placeholder='Type your full name here...' 
                                    inputText={fullNameInput} 
                                    onChangeText={setFullNameInput} 
                                />      
                            </RollUpDownView>
4

0 回答 0