第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何將按鈕從屏幕中間移動(dòng)到屏幕底部

如何將按鈕從屏幕中間移動(dòng)到屏幕底部

MMTTMM 2023-08-05 21:08:25
我已經(jīng)在本機(jī)反應(yīng)中實(shí)現(xiàn)了一個(gè)浮動(dòng)按鈕(TouchableOpacity)。我能夠根據(jù)滾動(dòng)位置顯示和隱藏按鈕。當(dāng)滾動(dòng)視圖向上滾動(dòng)時(shí),我想將按鈕完全移出屏幕(底部),而不是顯示和隱藏,當(dāng)滾動(dòng)視圖向下滾動(dòng)時(shí),我想將按鈕從屏幕底部向上移動(dòng)。我想使用流暢的動(dòng)畫來實(shí)現(xiàn)這一點(diǎn)。下面是我用來創(chuàng)建浮動(dòng)按鈕并在滾動(dòng)時(shí)顯示和隱藏的代碼。//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貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超7個(gè)贊

根據(jù)您的scrollPosition調(diào)用這些函數(shù)


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> 中并設(shè)置如下樣式:


Style={{

  transform: [{

     translateY: driver.interpolate({

        inputRange: [0, 1],

        outputRange: [startingYPosition, EndingYposition]  

      })

   }]

}}

假設(shè)按鈕可見時(shí)的positionY為700,那么outputRange的值將是[0, 700]


查看完整回答
反對 回復(fù) 2023-08-05
  • 1 回答
  • 0 關(guān)注
  • 105 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號