Question

我想在标记上显示图像，但是仅当我使用标记的icon属性时，它才起作用。我需要使用子视图来管理样式。当我使用ICON属性时，会显示视图图像（因此我在地图上有两张图像），但在注释中却没有显示。

这是我获取数据和更新状态的方式。

componentDidMount(){
  getmarkers().then(data => {
    let test = []
    data.forEach(element => {
      test.push(
        {
          latlng:
          {
            latitude: JSON.parse(element.latitude),
            longitude: JSON.parse(element.longitude)
          },
          name: JSON.parse(element.images)[0],
          id: element.id,
          image: JSON.parse(element.images)[0]
        }
      )
    });

    this.setState({ markers: test, loaded: true })

  })
}

}

这是我的观点

            {this.state.markers.map((marker, i) => (
          <Marker
            key={i}
            coordinate={marker.latlng}
            title={marker.name}
            description={marker.name}
            tracksViewChanges={false}
          // icon={{ uri: 'https://www.testeed.com/uploads/minifiedplaces/' + marker.image}}
          >

            <View>
              <Image source={{ uri: 'https://www.testeed.com/uploads/minifiedplaces/' + marker.image }} style={{ width: 40, height: 40, borderRadius: 6 }} />
            </View>

          </Marker>
        ))}

Answer 1

问题来自Trackviewchange。如果将此值设置为false。应用程序滞后。那么如果您将该值设置为false，则应用程序不会在第一次加载时加载图像。

因此，您必须将Trackviewchange初始化为True并在执行获取/ foreach之后创建promise，如果不起作用，则可以执行setimeout或setinterval将trackviewchange的值更改为false来显示图像更改和获得更好的流畅用户体验。

Answer 2

:CocRestart

const customMarkerImage = require("../../../customMarkerImage.png");

可能与这个问题有关：https://github.com/react-native-community/react-native-maps/issues/924

在渲染本机响应之前先获取多个图像源

2 个答案: