React native maps mapPadding не работает

Я использую fitToSuppliedMarkers() для своих маркеров, и мне нужно добавить отступы на мою карту. Я безуспешно пытался реализовать это решение. Я не могу использовать fitToCoordinates(), потому что мне нужно создать маркеры в componentDidMount, которые этот метод не поддерживает.

Мой код:

<MapView onMapReady = {() => this.mapRef.map.setNativeProps({ padding: 100 })}></MapView>

Этот код дает «setNativeProps не является функцией». Я также безуспешно пытался использовать свойство mapPadding, которое существует в документы:

<MapView mapPadding = {{top: 20, right: 20, bottom: 20, left: 20}}></MapView>
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
3
0
2 309
1

Ответы 1

Я считаю, что есть проблема с реализацией Android-карт response-native-maps. Я не уверен, но, похоже, это проблема с преобразованием px в dp. Попробуй это:

const padding = Platform.OS === 'android' 
                   ? PixelRatio.getPixelSizeForLayoutSize(20) 
                   : 20;

const mapPadding = {top: padding, right: padding, bottom: padding, left: padding};

Если это не сработает, попробуйте установить отступ на 200 и посмотреть, есть ли разница.


Редактировать: Это точный код, который я успешно использую:

const iosEdgePadding = { top: 100, right: 50, bottom: 300, left: 50 };

const androidEdgePadding = {
    top: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.top),
    right: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.right),
    bottom: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.bottom),
    left: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.left),
}

const edgePadding = (Platform.OS === 'android') ? androidEdgePadding : iosEdgePadding;

this.refs.map.fitToCoordinates([coordinate1, coordinate2], { edgePadding, animated: true })

Спасибо, я попробовал ваше решение, но, к сожалению, оно не сработало. Заполнение не применялось.

Operator 02.05.2018 11:08

Добавлен код, который я использую и должен работать. Убедитесь, что у вас установлена ​​последняя версия react-native-maps :)

Henning Hall 02.05.2018 11:22

Я не могу использовать fitToCoordinates, потому что мои маркеры поступают из запроса, который мне нужно выполнить в componentDidMount, который этот метод не поддерживает.

Operator 03.05.2018 05:27

Другие вопросы по теме