javascript - fast - Animar una vista única basada en múltiples ScrollView(s)

react native motion

Question

Estoy trabajando en una aplicación en la que estoy tratando de animar una View basada en la posición de desplazamiento de múltiples ScrollView .

Así es como se ve la pantalla.

La pantalla de arriba tiene 2 partes

• Un componente de View en la parte superior
• Un componente TabNavigator en la parte inferior

cada pestaña en TabNavigator tiene un ScrollView (en este caso hay 2 pero puede ser más), lo que quiero lograr es colapsar la View medida que el usuario se desplaza hacia abajo y expandirla cuando el usuario se desplaza hacia arriba. En una sola pestaña me estaba yendo bien, estaba funcionando exactamente como quería hacerlo, pero el problema vino cuando agregué la 2da pestaña.

El problema

Cuando me desplazo un poco en tab1 y me muevo a tab2 e intento desplazarme, se vuelve desigual. mira el GIF para entender lo que trato de decir

Actualizar

Consulte este refrigerio en la exposición para ver el problema en vivo

snack.expo.io/SytBkdBAW

Lo que probé

App.js

export default class App extends Component {

  constructor (props) {
    super(props)

    this.state = {
      /* omitted - not related */
      scrollY: new Animated.Value(0)
    }
  }

  render () {

    let translateY = this.state.scrollY.interpolate({
      inputRange: [0, 600],
      outputRange: [0, -290],
      extrapolate: ''clamp''
    });

    let TabsTranslateY = this.state.scrollY.interpolate({
      inputRange: [0, 600],
      outputRange: [0, -290],
      extrapolate: ''clamp''
    });

    return (
      <View style={styles.container}>
        <Animated.View style={{transform: [{translateY: translateY}], overflow: ''hidden''}}>
          <Text style={styles.welcome}>
            Welcome to React Native!!
          </Text>

          <Text style={styles.time}>
            {this.state.hour} : {this.state.minute}
          </Text>

          <TouchableOpacity onPress={() => { /* omitted */ }} style={styles.button}><Text style={styles.buttonText}>Set Time</Text></TouchableOpacity>
        </Animated.View>
        <Animated.View style={{
          flex: 0,
          transform: [{translateY: TabsTranslateY}],
          height: Dimensions.get(''window'').height
        }}>
          <Tabs removeClippedSubviews={false} screenProps={{animatedScrollY: this.state.scrollY}}/>
        </Animated.View>
      </View>
    )
  }
}

const styles = StyleSheet.create({/* omitted styles*/})

Home.js (Tab1)

/* omitted imports */
export default class Home extends Component {
  /* omitted navigation options */
  constructor (props) {
    super(props)

    this.state = {
      scrollY: this.props.screenProps.animatedScrollY
    }

  }

  render () {
  return (
      <View>
        <Animated.ScrollView onScroll={Animated.event(
          [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}],
          {useNativeDriver: true}
        )} scrollEventThrottle={16}>

          {Array(90).fill().map((v, i) => {
            return <Text key={i}
                         style={{flex: 1, backgroundColor: ''#333'', padding: 20, marginVertical: 10, color: ''white''}}>Item
              #{i + 1}</Text>
          })}
        </Animated.ScrollView>
      </View>
    )
  }
}

Photos.js (Tab2)

/* omitted imports */
export default class Photos extends Component {
  /* omitted navigation options */
  constructor (props) {
    super(props)

    this.state = {
      PhotosScrollY: this.props.screenProps.animatedScrollY
    }
  }

  render () {
    return (
      <Animated.ScrollView onScroll={Animated.event(
        [{nativeEvent: {contentOffset: {y: this.state.PhotosScrollY}}}],
        {useNativeDriver: true}
      )} scrollEventThrottle={16}>

        <View style={{flex: 1,}}>
          {Array(90).fill().map((v, i) => {
            return <View key={i} style={/* omitted */}>
              <Text style={/* omitted */}>
                Photo #{i + 1}
              </Text>
            </View>
          })}
        </View>

      </Animated.ScrollView>
    )
  }
}

No estoy seguro de cómo superar este problema. Se agradecen todas las sugerencias y soluciones.

Gracias.

Answer 1

Enfrenté este problema. Intenté resolverlo de esta manera. (Optimizándolo aún ..)

<ParentComponent>
    <CollapsibleHeader/>
    <TabNavigator/>
</ParentComponent>

El scrollState se encuentra en Parent Component, y las pestañas dentro de TabNavigator tienen scrollView. Actualizo el estado en el componente padre usando la devolución de llamada después de vincular el evento de Animación.

Por lo tanto, cada vez que se mueve entre dos pestañas, el estado se encuentra en el componente principal y se actualiza desde un lugar diferente.

Puede ser que esto te pueda ayudar.

NOTA: Aún optimizándolo.

---------Editar--------

Componente principal:

estado: scrollY: new Animated.Value(0)

componentDidMount(){
    binding event.
}
componentWillUnmount(){
    Unbind event.
}
onScrollEventCaptured(){
  (update parent state and send it to <CollapsibleHeader/>)*
}

Pestaña 1: Esto tiene estado local. (Optimizando esta parte), scrollY: new Animated.Value (0)

Tiene un ListView

Función onScroll en ListView:

onScroll={Animated.event([{
                        nativeEvent: {
                            contentOffset: {
                                y: this.state.scrollY
                            }
                        }
                    }], {
                        listener: (event) => {
                            AppEvents.fire("topBar", this.state.scrollY);
                        },
                    })}

AppEvents.fire () es el evento que se captura en Parent. (El evento capturado luego establece el estado, luego pasa como un apoyo al que realmente se anima). *

Para la Pestaña 2: Lo mismo que la Pestaña 1.

*Ambos son lo mismo.

Todavía estoy haciendo el trabajo de optimización para esto. La animación para mí es un poco desigual en el desarrollo de iOS, pero se ve muy bien en la aplicación iOS de producción. Android no hay palabras en todas partes es desigual.

Answer 2

Intenta usar Animated.add()

Entonces necesitas en la App

const tab1ScrollY = new Animated.Value(0)
const tab2ScrollY = new Animated.Value(0)
const scrollY = Animated.add(tab1ScrollY,tab2ScrollY)

scrollY es desplazamiento de tab1 scroll + tab2 scroll

Answer 3

Nunca he usado react-native, pero definitivamente puedo decir por qué tienes este problema. Utilicé la herramienta de depuración y me di cuenta de que cuando hacía clic en la pestaña y la aplicación llama a esta parte del código cada vez:

let translateY = this.state.scrollY.interpolate({
      inputRange: [0, 600],
      outputRange: [0, -290],
      extrapolate: ''clamp''
    });

    let TabsTranslateY = this.state.scrollY.interpolate({
      inputRange: [0, 600],
      outputRange: [0, -290],
      extrapolate: ''clamp''
    });

donde this.state.scrollY = new Animated.Value(0) todo el tiempo.

Básicamente, eso significa que cuando haga clic en la pestaña y comience a desplazarse, se desplazará desde 0. Necesita encontrar una solución para recordar el estado anterior del valor animado.Valor o cambiar los rangos de entrada / salida para la animación.

Aquí hay una muestra de cómo hacer clic en la pestaña de App.js:

<Tabs removeClippedSubviews={false} screenProps={{animatedScrollY: this.state.scrollY}}
          onNavigationStateChange={(prevState, currentState,action) => {
            console.log(currentState);
          }}
 />

Espero que te ayude.