Tengo un componente de lista plana que genera algunos datos y en la parte inferior hay un botón de acción flotante que hace algunas cosas. El botón está usando la posición absoluta y siempre está en la parte inferior central.
Cuando el usuario se desplaza hacia abajo, quiero que el botón desaparezca. Cuando se desplaza hacia arriba, quiero que el usuario muestre el botón. ¿Es eso posible en reaccionar nativo?
Mi componente principal que representa el encabezado, el cuerpo y el botón flotante:
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, } });Mi componente Body con flatlist en él:
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, }, });Y, por último, mi componente de botón flotante:
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> ) }EDITAR: puede ocultar el botón con onEndReached={} con bastante facilidad, ahora, ¿cómo puedo mostrarlo nuevamente cuando el usuario se desplaza hacia arriba?
Hay accesorios onScroll para FlatList que se hereda de ScrollView. En esta devolución de llamada, puede establecer el valor.
Por ejemplo, código:
.... const [showButton, setShowButton] = useState(true) .... <flatList onScroll={()=>setShowButton(true)} onEndReached={()=>setShowButton(false)} ....