Question

我在屏幕上有一个底部抽屉。代码：

<View style={[styles.bottomdrawer, {transform: [{translateY: slideY}]}]}>
    <Text>Hello world!</Text>
</View>

我想在单击按钮时向上滑动此按钮抽屉。我具有以下功能：

const slideY = new Animated.Value(100);

const SlideUp = () => {
    Animated.spring(slideY, {
        toValue: 0
    };
};

我的屏幕上有一个按钮。代码：

<Button title="Click here!" onPress={SlideUp} />

一切正常。问题是当我单击导航标题中的按钮时，我想向上滑动按钮抽屉。我将函数SlideUp传递给标题：

useEffect(() => {
    props.navigation.setParams({
         slideup: SlideUp
    };
}, []);

在标题中：

// ...
headerRight: () => (
    <TouchableHighlight onPress={navData.navigation.getParam('slideup')}>
        <Text>Slide up!</Text>
    </TouchableOpacity>
)

动画无效起作用！当我将console.log（）放入函数SlideUp中以查看是否调用了该函数时，我得到了输出。所以当我这样做时：

const SlideUp = () => {
    console.log('Is this function called?');
    Animated.spring(slideY, {
        toValue: 0
    };
};

，然后单击标题按钮，显示文字“此功能是否被调用？”。出现在我的控制台中，但是Animated.spring-function不起作用。问题可能在哪里？

Answer 1

缺少动画的开始

const SlideUp = () => {
    console.log('Is this function called?');
    Animated.spring(slideY, {
        toValue: 0
    }).start()// start your animation
};

从导航头调用时，响应本机动画不起作用

1 个答案: