Reaccionar nativo: reaccionar-mapas nativos. Animar el marcador activo dependiendo del desplazamiento de ScrollView -- react-native campo con react-native-maps camp Relacionados El problema

React Native: react-native-maps. Animate active marker depending on ScrollView offset


3
vote

problema

Español

Estoy usando react-native-maps y desea animar gradualmente la escala de marcadores activos e inactivos según el compensación new Animated.Value1 x. (la siguiente imagen lo describe mejor)

Mi enfoque es crear new Animated.Value para cada marcador y Interpolate ScrollView offset para cada marcador:

  //Container constructor(props) {     super(props);      this.state = {       ...       scale: [],       opacity: []     }   }  componentWillReceiveProps(props) {    if (props.places.length) {      const scale = [];     const opacity = [];      props.places.forEach((xx, ii) => {        this.state[`scale${ii}`] = new Animated.Value(0.5);       this.state[`scale${ii}`] = this._scrollX.interpolate({           inputRange: [vw * (ii - 1), vw * ii, vw * (ii + 1)],           outputRange: [0.5, 1, 0.5],           extrapolate: 'clamp'        });       scale.push(this.state[`scale${ii}`]);        this.state[`opacity${ii}`] = new Animated.Value(0);       this.state[`opacity${ii}`] = this._scrollX.interpolate({           inputRange: [vw * (ii - 1), vw * ii, vw * (ii + 1)],           outputRange: [0, 1, 0],           extrapolate: 'clamp'       });       opacity.push(this.state[`opacity${ii}`]);     });      this.setState({       scale,       opacity,     });   }    render() {     return (       <PlacesMap scale={this.state.scale} opacity={this.state.opacity} />                         <ScrollView onScroll={this._onScroll} ... />     )   }    _onScroll = Animated.event(       [{ nativeEvent: { contentOffset: { x: this._scrollX }}}],       { useNativeDriver: true }     );     //PlacesMap ....      render {         return (             <MapView.Animated>                  {   places &&                      places.map((place, ii) => {                         return (                             <PlaceMarker                               key={place.id.toString()}                               place={place}                               scale={scale[ii]}                               opacity={opacity[ii]}                             />                         )                      })                  }              </MapView.Animated>      )}   

Tal vez haya un enfoque más elegante (perfectante) que no conozco, donde no necesito crear new Animated.Value6 y Interpolators para cada marcador y con ¿Cuál puedo obtener el mismo resultado?

ingrese la descripción de la imagen aquí

Original en ingles

I am using react-native-maps and want to gradually animate scale of active and inactive markers depending on the ScrollView x offset. (the below image describes it better)

My approach is to create new Animated.Value for each marker and Interpolate ScrollView offset for each marker:

//Container constructor(props) {     super(props);      this.state = {       ...       scale: [],       opacity: []     }   }  componentWillReceiveProps(props) {    if (props.places.length) {      const scale = [];     const opacity = [];      props.places.forEach((xx, ii) => {        this.state[`scale${ii}`] = new Animated.Value(0.5);       this.state[`scale${ii}`] = this._scrollX.interpolate({           inputRange: [vw * (ii - 1), vw * ii, vw * (ii + 1)],           outputRange: [0.5, 1, 0.5],           extrapolate: 'clamp'        });       scale.push(this.state[`scale${ii}`]);        this.state[`opacity${ii}`] = new Animated.Value(0);       this.state[`opacity${ii}`] = this._scrollX.interpolate({           inputRange: [vw * (ii - 1), vw * ii, vw * (ii + 1)],           outputRange: [0, 1, 0],           extrapolate: 'clamp'       });       opacity.push(this.state[`opacity${ii}`]);     });      this.setState({       scale,       opacity,     });   }    render() {     return (       <PlacesMap scale={this.state.scale} opacity={this.state.opacity} />                         <ScrollView onScroll={this._onScroll} ... />     )   }    _onScroll = Animated.event(       [{ nativeEvent: { contentOffset: { x: this._scrollX }}}],       { useNativeDriver: true }     );     //PlacesMap ....      render {         return (             <MapView.Animated>                  {   places &&                      places.map((place, ii) => {                         return (                             <PlaceMarker                               key={place.id.toString()}                               place={place}                               scale={scale[ii]}                               opacity={opacity[ii]}                             />                         )                      })                  }              </MapView.Animated>      )} 

Maybe there is a more elegant (performant) approach that I don't know, where I don't need to create new Animated.Value and Interpolators for each marker and with which I can get the same result?

enter image description here

     
       
       

Lista de respuestas


Relacionados problema

1  REACT-MAPS-MAPS-SUPER-CLUSTER: cómo hacer múltiples grupos  ( React native maps super cluster how to make multiple type of clusters ) 
He logrado hacer grupos con reaccionar: mapas nativos-super-cluster. Mi requisito es ahora crear múltiples clústeres según la categoría Puntos de clúster. Por...

2  El marcador reacciona el mapa nativo no puede arrastrar  ( Marker react native map cant drag ) 
Veo el uso de reaccionar nativo de Air BNB para que haga un mapa de Google en mi aplicación nativa. Se presenta el mapa y el marcador, pero el marcador no pue...

4  Reaccionar la ejecución del cuadro del mapa nativo falló las clases de transformación con DEX / JARMERGING  ( React native map box execution failed transform classes with dex jarmerging ) 
Acabo de empezar a usar MapBox en React-nativo, pero parece que estoy obteniendo el siguiente error * What went wrong: Execution failed for task ':app:tran...

0  Reaccionar: el valor "para la longitud no puede ser arrojado de cuerda a doble"  ( React native value for longitude cannot be cast from string to double ) 
Estoy usando react-native-maps y obtengo lat y largo usando este código: callLocation(that) { navigator.geolocation.getCurrentPosition( position =>...

0  Obtenga el nombre de la ubicación de la latitud y la longitud en reacción-nativa  ( Get location name from the latitude and longitude in react native ) 
En la actualidad, estoy recibiendo la latitud y la forma de longitud UITableView2 en reacción-nativo. Pero quiero mostrar la ubicación de los usuarios. ¿Cóm...

3  reaccionar nativo no puede instalar reaccionar mapas nativos (Android)  ( React native cant install react native maps android ) 
No puedo instalar reaccionar los mapas nativos nativos, obtengo este error cuando intento construir con reaccionar: Android nativo nativo (todavía no lo inten...

-4  Dependencias de conflictos de Android  ( Android conflict dependencies ) 
Estoy aprendiendo React-Native y ha creado una aplicación para mostrar el mapa usando react-native-maps biblioteca. He seguido todos los pasos en aquí ...

0  ¿Hay alguna manera de llamar a una función una vez que MAPVIEW.ANIMATEGION METHET se detiene  ( Is there a way to call a function once mapview animatetoregion method stops ) 
Estoy teniendo un problema con mi método de animateTorregión que debería acercarse a un marcador específico que se corta durante la animación debido a que se ...

5  reaccionar-mapas nativos en blanco en el dispositivo Android  ( React native maps blank on android device ) 
reaccionar nativo está en blanco en mi dispositivo Android. Es solo una pantalla gris con el logotipo de Google. A diferencia de reacción-nativa-mapas Página...

1  Zoom In / Out React-Native-Maps basado en el radio en km / millas  ( Zoom in out react native maps based on radius in km miles ) 
Tengo un requisito en mi aplicación nativa de reacción donde, en el que, si el usuario proporciona un número que será el número de kilómetros o millas (como 5...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos