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

Question

我有一个 flatlist 组件，它呈现一些数据，底部有一个浮动操作按钮，它可以做一些事情。该按钮使用绝对位置，并且始终位于中心底部。

当用户向下滚动时，我希望按钮 dissapear.When 他向上滚动时，我希望用户显示按钮。在 React Native 中这可能吗？

我呈现页眉、正文和浮动按钮的主要组件：

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 组件中有 flatlist：

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>
    )
  }

What I want to achieve

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

Answer 1

FlatList有一个propsonScroll，继承自ScrollView。在此回调中，您可以设置值。

例如代码：

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

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

How to hide and show Floating Button on top of FlatList when user reached the bottom or top?

javascript

floating-action-button

react-native

react-native-flatlist

react-hooks