Javascript Girl
  1. Javascript Girl
  3. Réagissez sur les marqueurs Airbnb natifs: les marqueurs disparaissent avec succès, mais ne réapparaissent pas
Intereting Posts
Opérateurs logiques et résultats Javascript Static Constructor dans Javascript ES6 Les débordements de texte multi-lignes de cross-browsers croisés avec des points suspensifs sont-ils ajoutés dans une division fixe de largeur et hauteur? Trouvez le plus proche / suivant div Comment puis-je définir un getter et setter par défaut en utilisant ECMAScript 5? Pourquoi la réponse 42 est-elle? AddEventListener dans le script de contenu ne fonctionne pas Premier filtre filtre global sans les filtres de colonne Combiné 2 tableaux dans la boîte de sélection Jquery chosen.js Déterminez si et quel postback partiel s'est produit dans pageLoad () avec JavaScript dans .NET Publiez une vidéo par URL sur facebook en utilisant l'API de graphique facebook? Javascript remplace tout avec insensible à la casse et garde le cas correct dans la chaîne d'origine Comment renvoyer les valeurs de promesse devinées accumulées comme tableau à .th () suivant Array.prototype.reduce ()? Définit la valeur par défaut du champ de saisie de la date HTML5 avec angularJS Type de texte Comment déclarer un type de sous-classe?

Réagissez sur les marqueurs Airbnb natifs: les marqueurs disparaissent avec succès, mais ne réapparaissent pas

Je suis actuellement en train de créer une application avec réagir-native et j'utilise le plugin de cartes Airbnb pour afficher dynamiquement les marqueurs. Mes marqueurs sont téléchargés à partir de la base de données Firebase avec succès, et le tableau qui est téléchargé affiche toujours le contenu correct. J'ai le code complet ici juste au cas où https://codepen.io/yeni/pen/Kqyrxv?editors=0010 🙂

Chaque fois que je modifie la propriété cur_user d'un marqueur sur 1 , il ne s'affiche pas correctement sur la carte. Cependant, lorsque je change de cur_user à 0 , le marqueur n'est pas affiché (ce qui serait le comportement désiré). Mon code se présente comme suit: 

  //Store file MarkersStore.js class MarkersStore { @observable markers = []; constructor() { console.log("Started downloading markers"); var localMarkers = []; Fb.bikes.on('value', (snap) => { localMarkers = []; snap.forEach((marker) => { localMarkers.push({ longitude: parseFloat(marker.val().positionLng), latitude: parseFloat(marker.val().positionLat), description: "Bike 1", title: "b" + String(marker.val().bike_no), bike_no: marker.val().bike_no, cur_user: marker.val().current_user, key: marker.getKey() }) }); //Once must make sure that the upper command already finished executing! this.markers.replace(localMarkers); console.log("Loaded markers"); }); } } ... //Rendering file MarkersComponent.js render() { var renderingMarkers = this.fbMarkers.markers.slice() || []; console.log("fbMarkers are: "); console.log(this.fbMarkers.markers.slice()); console.log("Rendering stuff.."); console.log(renderingMarkers); console.log("Rendering ALL the stuff!"); return (<View> {renderingMarkers.map( (marker) => { console.log("Markers are re-rendered"); console.log(marker.bike_no); console.log(marker.cur_user); //All console logs up until here show correct results return ( <View key={marker.bike_no}>{ (marker.cur_user == 0) ? <MapView.Marker navigator={this.props.navigator} key={marker.bike_no} coordinate={{longitude: marker.longitude, latitude: marker.latitude}} title={marker.title} description={marker.description} onPress={(coord, pos) => this.startBookingBike(marker.bike_no)} ><View style={styles.bikeRadius}><View style={styles.bikeMarker}> </View></View> </MapView.Marker> : null }</View> ); })}</View>) }

De plus, l'autorun est déclenché avec succès chaque fois que je change certaines données dans la base de données (et les données récupérées correctes sont affichées). Existe-t-il potentiellement un moyen de mettre la fonctionnalité autorun dans la méthode de rendu pour réessayer avec succès tout?

** EDIT ** J'ai également ouvert un problème sur la page officielle de github, car cela semble être un bug. Corrige moi si je me trompe! 🙂 https://github.com/airbnb/react-native-maps/issues/1426

La solution actuelle que j'ai trouvée est la suivante (je sais que c'est très peu élégant, et je sais que cela pourrait être vraiment dangereux car des boîtes de dialogue pourraient encore exister [des boîtes à puce existent-elles encore?]), Mais simplement les repères et les cacher en faisant rayon Zero me permet d'atteindre cet objectif.

J'ai donc le rendu de marque suivant: 

 return ( <View key={marker.bike_no}> { <MapView.Marker navigator={this.props.navigator} coordinate={{longitude: marker.longitude, latitude: marker.latitude}} title={marker.title} description={marker.description} onPress={(coord, pos) => this.startBookingBike(marker.bike_no)} key={marker.key} ><View style={(marker.cur_user == 0) ? styles.bikeRadius : styles.markerStyleHidden }><View style={styles.bikeMarker}> </View></View> </MapView.Marker> }</View> );

Avec la propriété de style telle que définie ici: 

 markerStyleHidden: { height: 0, width: 0, borderRadius: 0, overflow: 'hidden', backgroundColor: 'rgba(0, 122, 255, 0.5)', borderWidth: 0, borderColor: 'rgba(0, 122, 255, 0.5)', alignItems: 'center', justifyContent: 'center' }, radius: { height: 30, width: 30, borderRadius: 30 / 2, overflow: 'hidden', backgroundColor: 'rgba(0, 122, 255, 0.5)', borderWidth: 4, borderColor: 'rgba(0, 122, 255, 0.5)', alignItems: 'center', justifyContent: 'center' },