Estoy usando una biblioteca que permite el desplazamiento. Hace el trabajo, pero el problema es que hay un error en el que la vista expande la altura de la vista más grande. Así que habrá un gran espacio debajo de la primera vista. Tenga en cuenta que solo sucede cuando el componente se procesa por primera vez y desaparece cuando me desplazo a otra vista y me desplazo de regreso a la primera vista. Esencialmente, el problema se soluciona solo si tuviera que desplazarme a otra vista y regresar y es el resultado de la propiedad animateHeight que está disponible en la biblioteca. Básicamente ajusta la altura cuando hay un cambio en la vista. Sin embargo, creo que la razón por la que todavía lo veo en la primera vista cada vez que el componente se muestra por primera vez (después de una actualización de la página) es porque no se detecta ningún cambio. Entonces, la biblioteca introdujo esta nueva función a medida que más usuarios se quejaban de este problema. Se llama el
actualizarAltura
función.
Este es el código que están usando en la solicitud de extracción de la biblioteca para esta función updateHeight:
componentDidUpdate(prevProps) { // If animateHeight is on // and has changed children, readjust height const { animateHeight, children } = this.props; if (animateHeight === true && prevProps.children !== children) { this.updateHeight(); } }Sin embargo, esto tampoco ha funcionado. Básicamente, lo que se supone que debe hacer esta función es detectar cuándo los niños han cambiado y actualizar la altura en consecuencia.
Entonces, lo que hice fue ir a los elementos secundarios del contenedor SwipeableViews e hice un componenteDidMount/componentWillMount/shoudComponentUpdate
Sin embargo, todavía no es bueno. ¿Se me escapa algo?
Consulte mi código para el contenedor SwipeableViews:
<SwipeableViews action={(actions) => { this.swipeableActions = actions; }} index={currentTab} onChangeIndex={ this.setCurrentTable } containerStyle={this.useSwipeableViewContainerStyles()} animateHeight> <div> <FoodsTable updateHeight={this.UpdateSwipeableViewHeight} ref={this.defaultTableRef} /> </div> <div> <SportsTable updateHeight={this.UpdateSwipeableViewHeight} /> </div> <div> <BarTable updateHeight={this.UpdateSwipeableViewHeight} /> </div> <div> <RotationTable updateHeight={this.UpdateSwipeableViewHeight} /> </div> </SwipeableViews>