React Native Airbnb Markers:标记成功消失,但没有重新出现

2024-03-19

我目前正在使用 React-Native 构建一个应用程序,并使用 Airbnb 地图插件来动态显示标记。我的标记已成功从 firebase 数据库下载,并且下载的数组始终显示正确的内容。我这里有完整的代码以防万一https://codepen.io/yeni/pen/Kqyrxv?editors=0010 https://codepen.io/yeni/pen/Kqyrxv?editors=0010 :)

每当我改变cur_user标记的属性1,成功不在地图上显示。然而,当我改变cur_user回到0,标记不会显示(这将是期望的行为)。我的代码如下所示:

    //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>)
  }

此外,每次我更改数据库中的某些数据时,都会成功触发自动运行(并显示正确的检索数据)。是否有任何方法可以将自动运行功能放入渲染方法中以成功重新渲染所有内容?

** 编辑 ** 我还在官方 github 页面上提出了一个问题,因为这似乎是一个错误。如我错了请纠正我! :)https://github.com/airbnb/react-native-maps/issues/1426 https://github.com/airbnb/react-native-maps/issues/1426


我找到的当前解决方案如下(我知道它非常不优雅,而且我知道它可能真的不安全,因为碰撞盒可能仍然存在[碰撞盒仍然存在吗?]),但只需渲染标记并通过将半径设置为零让我能够实现这一目标。

所以我有以下标记渲染:

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>
          );

使用此处定义的 style 属性:

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'
  },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Native Airbnb Markers:标记成功消失,但没有重新出现 的相关文章

  • 对自定义打字稿错误实例实施instanceof检查?

    打字稿有这个instanceof 检查自定义错误 https github com Microsoft TypeScript issues 13965问题 但尚不清楚我们需要做什么才能得到instanceof在职的 例如对于这个异常我们如何
  • 邮件附件媒体类型错误 Gmail API

    我正在尝试通过 Javascript 客户端中的 Gmail API 发送带有附加 jpeg 文件的消息 到目前为止我写的代码如下 ajax type POST url https www googleapis com upload gma
  • 允许指针(单击)事件穿过元素,同时保持滚动功能

    我的目标是拥有一个允许 下面要点击 交互的元素 滚动 众所周知 1 的解是pointer events none 这正如中所描述的单击 DIV 到底层元素 https stackoverflow com questions 3680429
  • 如何制作像Stackoverflow一样的可折叠评论框

    我正在构建一个网站 并且有一个状态更新列表 我希望允许用户为列表中的每个项目撰写评论 但是我正在尝试实现一个类似于堆栈溢出工作方式的用户界面 特别是可折叠的评论表单 列表 用户在其中单击对列表中的特定状态更新添加评论 并且在列表中的该项目下
  • 如何在打字稿中使用react-navigation的withNavigation?

    我正在尝试结合使用react native react navigation 和typescript 来创建一个应用程序 只有两个屏幕 HomeScreen and ConfigScreen 和一个组件 GoToConfigButton 总
  • React延迟加载/无限滚动解决方案

    我花了一段时间才弄清楚如何使用优秀的延迟加载图像React Lazyload 组件 https github com jasonslyvia react lazyload 演示在滚动时延迟加载图像 但在测试时我无法获得相同的行为 罪魁祸首是
  • 捕获外部脚本文件中的 javascript 错误

    我有一点 JavaScript Jquery 工具的叠加层 http flowplayer org tools overlay index html 当放到错误使用它的页面上时可能会引发异常 我正在尝试优雅地处理它 我有一个通用的 wind
  • 是否可以将 BitmapDescriptor 转换为 Bitmap?

    我需要将 BitmapDescriptor 转换为 Bitmap 我可以使用以下代码将位图转换为 BitmapDescriptor BitmapDescriptor bd BitmapDescriptorFactory fromBitmap
  • 为什么我的 onclick 事件自动触发

    加载页面时最初显示 Hello World 我希望它仅在单击按钮后显示 我知道我可以通过向按钮添加内联事件侦听器来做到这一点 我可以只用脚本编写所有这些代码吗
  • 使用 ES6 模块导出/导入单个类方法?

    假设我有一个像这样的简单课程fileA js class foo constructor x this name x fooMethod x return x hello 我想导入并使用fooMethod in fileB js像这样 im
  • 正则表达式 - 避免表达式中出现字符串

    我正在尝试创建一个应该匹配以下情况的正则表达式 如果单词完全匹配 first second third 那么匹配应该失败 但如果它周围有任何字符 那么应该匹配该字符串 我还需要避免字符串中的某些字符集 如果这些字符是字符串的一部分 则匹配结
  • 禁用任何类型的浏览器窗口滚动?

    有没有办法禁用滚动 不仅仅是滚动条 还有浏览器窗口的全部功能 根据您对 Keit 的回答 您不想在打开灯箱时滚动处于活动状态 如果是这种情况 您可以使用以下 css 在打开灯箱的同时向正文添加一个类 这个解决方案的好处是它保留了滚动 空间
  • Rxjs 可观察等待直到满足某些条件

    我有以下重试逻辑来重试操作 对于单个请求来说它工作得很好 对于多个正在进行的请求 我想在重试之前等待现有的重试逻辑完成 handleError errors Observable
  • 比较 javascript 元素和 scala 变量的 Play 框架 Twirl 模板

    如下面的代码示例所示 我想比较 scala 辅助元素内的 javascript 元素 然而 即使存在元素 abcde 它也始终返回 false 除了使用标签之外 如何获取 scala 辅助元素内的 javascript 值 appSeq S
  • 在外部单击时关闭弹出 div

    我有一个弹出 div 仅在单击特定按钮时显示 单击同一按钮时它甚至会隐藏 我的问题是 我还想在单击外部任何地方时隐藏 div 我无法这样做 因为弹出 div 位于主包装类内部 并且无法通过在包装类上使用 click 事件并使其隐藏来做到这一
  • IE6 丢失查询字符串

    我有一个使用 javascript 从查询字符串中获取值的页面window location 从网络服务器运行时效果很好 但如果我通过将其放在地址栏中使用 IE6 在本地运行它 c mysite index htm 网站创建的任何查询字符串
  • 在 中动态添加链接样式表 [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 如何将链接
  • 盒式捆绑包与 MVC4 捆绑包

    我目前正在开发一个原型 ASP NET MVC 3 解决方案 该解决方案将用作多个项目重写的基础 来自 Web 表单 我的目标之一是跨应用程序实现一些脚本管理 而不是我们目前没有的目标 MVC 3有一个缺陷恕我直言 如果您需要在部分视图或模
  • jQuery fadeOut 一个 div,fadeIn 另一个 div 在其位置

    我正在尝试一个简单的 jQuery 脚本来淡出一个 div 并淡入另一个 div 但由于某种原因 第一个 div 永远不会淡出 这可能是代码的一个明显问题 但我似乎无法弄清楚 div div div div
  • html5 canvas 使用图像作为蒙版

    是否可以使用具有形状的图像作为整个画布或画布内图像的蒙版 我想将图像放置在画布中 并在图像上添加蒙版 然后将其另存为新图像 您可以使用 source in globalCompositeOperation 将黑白图像用作蒙版 首先 将蒙版图

随机推荐