亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將按鈕從屏幕中間移動到屏幕底部

如何將按鈕從屏幕中間移動到屏幕底部

MMTTMM 2023-08-05 21:08:25
我已經在本機反應中實現了一個浮動按鈕(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');                }}任何幫助表示贊賞。謝謝。
查看完整描述

1 回答

?
蕪湖不蕪

TA貢獻1796條經驗 獲得超7個贊

根據您的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]


查看完整回答
反對 回復 2023-08-05
  • 1 回答
  • 0 關注
  • 106 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號