React Native Maps: Markers image doesn't show using Custom Marker in react-native-maps

后端 未结 10 1836
别那么骄傲
别那么骄傲 2021-02-05 16:52

I\'m using react-native-maps but I faced a problem that after a lot of googling without answer makes me ask it here. I\'m trying to use Custom Marker for the marker

相关标签:
10条回答
  • 2021-02-05 17:13

    My problem was solved right now.

    I hope your problem will be solved.

    This is my clean code:

    import React, {Component} from 'react';
    import {ImageBackground, Text} from 'react-native';
    import {Marker} from 'react-native-maps';
    
    export default class CustomMarker extends Component {
        state = {
            initialRender: true
        }
    
        render() {
            return (
                <Marker
                  //...
                >
                    <ImageBackground
                        source={require('../assets/cluster3_mobile.png')}>
    
                        // *** These lines are very important ***
                        onLoad={() => this.forceUpdate()}
                        onLayout={() => this.setState({initialRender: false})}
                        key={`${this.state.initialRender}`}
                        >
                        
    
                        // **** This line is very very important ****
                        <Text style={{width: 0, height: 0}}>{Math.random()}</Text>
    
                    </ImageBackground>
                </Marker>
            );
        }
    }
    
    0 讨论(0)
  • 2021-02-05 17:13

    For my case the problem was only with remote Images so I solve it by a hack.

    I just put one version of Image with zero width inside Text Component and one version out side Text Component. and suddenly everything's solved.

        <Image
         source={{ uri: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" }}
         style={styles.companyLogoMarker}
         resizeMode="cover"
         />
         <Text style={styles.markerText}>
            {names?.[0]?.value}
           <Image
               source={{ uri: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" }}
               style={{width: 0, height: 0}}
               resizeMode="cover"
            />
         </Text>
    

    as of writing this Answer this is a bug in [react native maps][1] and not solved since 2017

    0 讨论(0)
  • 2021-02-05 17:14

    I Had same problem , from github post

    using below(MapView , Image) pattern first load problem will still occour

    <MapView.Marker>
        <Image source={img_marker} />
    </MapView.Marker>
    

    so adopted below solution : trick is to save current selected marker id in redux

    class Map extends React.Component {
    render() {
        let {region, markers , markerClick} = this.props;
        const normalMarkerImage = require('../../images/normal_marker.png');
        const selectedMarkerImage = require('../../images/selected_marker.png');
        return !isObjectEmpty(region) && !isObjectEmpty(markers) ? (
            <MapView
                style={styles.map}
                showsUserLocation={true}
                followUserLocation={true}
                zoomEnabled={true}
                region={region}
                paddingAdjustmentBehavior={'automatic'}
                showsIndoors={true}
                showsIndoorLevelPicker={false}
                showsTraffic={false}
                toolbarEnabled={false}
                loadingEnabled={true}
                showsMyLocationButton={true}>
                {markers && markers.length > 0
                    ? markers.map((marker, i) => (
                            <MapView.Marker
                                coordinate={{
                                    longitude: marker.loc.coordinates[0],
                                    latitude: marker.loc.coordinates[1],
                                }}
                                key={`marker-${i}`}
                                style={{height: 20, width: 20}}
                                onPress={e => markerClick(e, marker)}
                                image={
                                    this.props.selectedMarker === marker._id
                                        ? selectedMarkerImage
                                        : normalMarkerImage
                                }
                            />
                      ))
                    : null}
            </MapView>
        ) : null;
      }
    }
    

    component Function

    markerClick = async (event, data) => {
        this.props.dispatch(
            setMarkerIconInRedux(this.state.popover.currentData._id)
        );
    };
    

    Action

    export const setMarkerIconInRedux = where => {
        return {
            type: 'SET_MARKER_ICON',
            _id: where,
        };
    };
    

    Redux

    export const currentSelectedMarker = (state = {selectedMarker: ''}, action) => 
    {
        if (action.type === 'SET_MARKER_ICON') {
            return {selectedMarker: action._id};
        } else if (action.type === 'REMOVE_MARKER_ICON') {
            return {selectedMarker: ''};
        } else {
            return state;
        }
    };
    
    0 讨论(0)
  • 2021-02-05 17:14

    I solved this issue by replacing 16-bit gamma integer Image with 8-bit gamma integer Image. It can be done in Gimp, once exporting Image select 8bpc RGBA.

    0 讨论(0)
  • 2021-02-05 17:18

    I had the same problem.

    When you first load an application, the image does not show, but for later loading, this problem is resolved and show image.

    Just enough after the image is loaded call this.forceUpdate()

    const defaultEmployeeLogo = require("../../../assets/defualtEmployee.png");
    
    <Image source={defaultEmployeeLogo} onLoad={() => this.forceUpdate()}>
        <Text style={{width:0, height:0}}>{Math.random()}</Text>
    </Image>
    

    You can track this:

    https://github.com/react-community/react-native-maps/issues/924

    0 讨论(0)
  • 2021-02-05 17:19

    as of Oct 2019, the image can be displayed in the marker as along as the tracksViewChanges is set to true. I use FastImage but the general idea is to set tracksViewChanges to true and then to false as soon as the image is loaded so that there won't be any performance issue.

    export const UserMapPin = props => {
      const [trackView, setTrackView] = useState(true);
    
      function changeTrackView() {
        setTrackView(false);
      }
    
      return (
        <Marker
          tracksViewChanges={trackView}
          coordinate={props.coordinates}>
          <View style={styles.imageIconContainer}>
              <FastImage
                onLoadEnd={changeTrackView}
                style={styles.someImageStyle}
                source={{
                  uri: props.imageURI,
                }}
                resizeMode={FastImage.resizeMode.cover}
              />
          </View>
        </Marker>
      );
    };
    
    0 讨论(0)
提交回复
热议问题