当用户到达底部或顶部时，如何隐藏和显示 FlatList 顶部的浮动按钮？

Question

我有一个扁平列表组件，它呈现一些数据，底部有一个浮动操作按钮，可以执行一些操作。该按钮使用绝对位置，并且始终位于中心底部。

当用户向下滚动时，我希望按钮消失。当用户向上滚动时，我希望用户显示按钮。这在本机反应中可能吗？

我的主要组件，用于渲染标题、正文和浮动按钮：

const Main = ({navigation, route}) => {
    return (
        <View style={styles.container}>
          <Header/>
          <Body data={route.params.item}/>
          <FloatingButton data={route.params.item}/>
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor:color_theme_light.bodyBackground,
  }
});

我的 Body 组件中包含平面列表：

const Body = ({data}) => {

  useEffect(() => {
    ...dataLoading....
  },[])


  return (
      <View style={{flex:1}}>
          <FlatList data={oltasok} renderItem={({item}) => (
              <TouchableOpacity onPress={() => setOltasDetailsVisible(true)}>
                <View style = {styles.container}>
                    ...flatlist elements....
                </View>
              </TouchableOpacity>
            )} keyExtractor={(item, index) => String(index)} />  
    </View>
  );
}

  
const styles = StyleSheet.create({
container: {
    justifyContent:"space-between",
    flexDirection:"row",
    margin:20,
},
});

最后是我的浮动按钮组件：

const FloatingButton = ({data}) => {
    return(
    <View style={{flex:1 ,alignItems:'center', flexDirection:'row', position:'absolute',
    top:(window.height)*0.88,
    zIndex:999}}>
      <View style={{flexDirection:'row',
                    justifyContent:'center',
                    width:'100%'}}>
        <TouchableOpacity style={{
          marginTop:20,
          backgroundColor:color_theme_light.buttonColor,
          alignItems:'center',
          padding:13,
          borderRadius:30,
          width:200,
          position:'relative'
        }}
        onPress={() => someMethod(true)}
        >
          <Text style={{fontFamily:'QuicksandMedium',color: color_theme_light.buttonText, fontSize:17}}>Új oltás hozzáadása</Text>
        </TouchableOpacity>
      </View>

    </View>
    )
  }

我想要达到的目标

编辑：您可以使用 onEndReached={} 轻松隐藏按钮，现在如何在用户向上滚动时再次显示它？

Answer 1

FlatList 有一个 props

onScroll

，继承自 ScrollView。在此回调中您可以设置值。

例如代码：

....
const [showButton, setShowButton] = useState(true)
....
<flatList
    onScroll={()=>setShowButton(true)}
    onEndReached={()=>setShowButton(false)}
....

Answer 2

你可以尝试这个方法：

onMomentumScrollBegin={() => setStateTo(false)} onMomentumScrollEnd={() => setStateTo(true)}

当用户到达底部或顶部时，如何隐藏和显示 FlatList 顶部的浮动按钮？

问题描述投票：0回答：2

2个回答

最新问题

当用户到达底部或顶部时，如何隐藏和显示 FlatList 顶部的浮动按钮？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2