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

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 default

const fadeIn = () => {

  Animated.timing(driver, {

  toValue: 1,

  duration: 500,

  useNativeDriver: true

  }).start()

}

const fadeout = () => {

  Animated.timing(driver, {

  toValue: 0,

  duration: 500,

  useNativeDriver: true

  }).start()

}

将 TouchableOpacity 包装在 <Animated.View> 中并设置如下样式：

Style={{

  transform: [{

     translateY: driver.interpolate({

        inputRange: [0, 1],

        outputRange: [startingYPosition, EndingYposition]  

      })

   }]

}}

假设按钮可见时的positionY为700，那么outputRange的值将是[0, 700]