如何将按钮从屏幕中间移动到屏幕底部

Question

我已经在本机反应中实现了一个浮动按钮（TouchableOpacity）。我能够根据滚动位置显示和隐藏按钮。当滚动视图向上滚动时，我想将按钮完全移出屏幕（底部），而不是显示和隐藏，当滚动视图向下滚动时，我想将按钮从屏幕底部向上移动。我想使用流畅的动画来实现这一点。

下面是我用来创建浮动按钮并在滚动时显示和隐藏的代码。

//For Handling button show and hide for the scroll position.

handleScroll = (event: any) => {

 const { animatedOpacityValue, showBlueButton } = this.state;

 const scrollPosition = event.nativeEvent.contentOffset.y;

 console.log('Scroll Position:', scrollPosition);

if (scrollPosition > 0 && scrollPosition < 400) {

  Animated.timing(this.state.animatedOpacityValue, {

    toValue: 1,

    duration: 5,

    useNativeDriver: true,

  }).start(() => this.setState({ showBlueButton: true }));

} else if (scrollPosition > 400 && showBlueButton) {

  Animated.timing(this.state.animatedOpacityValue, {

    toValue: 0,

    duration: 5,

    useNativeDriver: true,

  }).start(() => this.setState({ showBlueButton: false }));

 }

};

// 渲染方法

      <ScrollView

              style={styles.scrollViewStyles}

              contentContainerStyle={{ paddingBottom: 330 }}

              contentInset={{

                top: 10,

                bottom: Platform.OS === 'ios' ? 0 : 100,

              }}

              onScroll={this.handleScroll}

              scrollEventThrottle={16}>

              <CardView

                onSymptomLog={() => {

                  this.state.navigation.push('SymptomLogs');

                }}

              />

              <TodaySymptomsCard

                showBlueView={this.state.showBlueView}

                reminderTime={'5:40 PM'}

                symptomsCount={0}

                onEditAction={() => {

                  this.state.navigation.push('SetRemainder');

                }}

任何帮助表示赞赏。谢谢。

Answer 1

根据您的scrollPosition调用这些函数const driver = Animated.value(0) //1 if the button should be shown by defaultconst fadeIn = () => {&nbsp; Animated.timing(driver, {&nbsp; toValue: 1,&nbsp; duration: 500,&nbsp; useNativeDriver: true&nbsp; }).start()}const fadeout = () => {&nbsp; Animated.timing(driver, {&nbsp; toValue: 0,&nbsp; duration: 500,&nbsp; useNativeDriver: true&nbsp; }).start()}将 TouchableOpacity 包装在 <Animated.View> 中并设置如下样式：Style={{&nbsp; transform: [{&nbsp; &nbsp; &nbsp;translateY: driver.interpolate({&nbsp; &nbsp; &nbsp; &nbsp; inputRange: [0, 1],&nbsp; &nbsp; &nbsp; &nbsp; outputRange: [startingYPosition, EndingYposition]&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp;}]}}假设按钮可见时的positionY为700，那么outputRange的值将是[0, 700]