react-native-yamap
react-native-yamap copied to clipboard
Не рендерятся иконки маркеров и позиции пользователя при локальном импорте (Android)
const LOCATION = require('./location.png');
const USER = require('./user.png');
<YaMap
ref={mapRef}
rotateGesturesEnabled={false}
userLocationIcon={USER}
showUserPosition
style={styles.container}>
{items.length > 0 && items.map( item =>
<Marker
key={item.Id}
scale={2}
source={LOCATION}
point={{lat: item.CoordX, lon: item .CoordY}}
onPress={()=>onMarkerPress(item.CoordX, item.CoordY, item.Id)}
/>
)}
</YaMap>
Иногда они рендерятся, иногда нет (синие точки). Бывает еще, что иконка USER пропадает. Закономерности не выявил.
Проблема возникает из-за некорректно первого рендера на android. На ios все нормально. Снизу пример исправления.
const YMap = ({ lat = 0, lon = 0 }) => {
const [isVisible, setIsVisible] = useState<boolean>(false);
useEffect(() => {
setIsVisible(true);
}, []);
return (
<View style={styles.container}>
<YaMap
initialRegion={{
lat,
lon,
zoom: 16,
}}>
<Marker
point={{ lat, lon }}
source={require("@app/assets/images/LandmarkIcon.png")}
scale={1.5}
visible={isVisible}
/>
</YaMap>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
Проблема возникает из-за некорректно первого рендера на android. На ios все нормально. Снизу пример исправления.
const YMap = ({ lat = 0, lon = 0 }) => { const [isVisible, setIsVisible] = useState<boolean>(false); useEffect(() => { setIsVisible(true); }, []); return ( <View style={styles.container}> <YaMap initialRegion={{ lat, lon, zoom: 16, }}> <Marker point={{ lat, lon }} source={require("@app/assets/images/LandmarkIcon.png")} scale={1.5} visible={isVisible} /> </YaMap> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, }, });
У меня все равно 1 из 10 раз не прорисовываются( но раньше вообще не рендерились. спасибо. Глючная либа
У меня все равно 1 из 10 раз не прорисовываются( но раньше вообще не рендерились. спасибо. Глючная либа
Так же. Мне помогло изменить isVisible в onMapLoaded, а не в useEffect'e при монтировании