Динамическое изменение размера Nativescript ContentView в ScrollView в зависимости от высоты устройства

У меня есть шаблон компонента Nativescript Vue, определенный как:

<ScrollView>
    <StackLayout>
        <ContentView ref="mapContainer" height="500" width="100%">
            <Mapbox
            accessToken="my access key"
            mapStyle="outdoors-v9"
            hideCompass="true"
            zoomLevel="10.2" , 
            latitude="51.949266"
            longitude="-12.183571"
            showUserLocation="true"
            disableZoom="true"
            disableRotation="true"
            disableScroll="true"
            disableTilt="true"
            @mapReady="onMapReady($event)">
            </Mapbox>
        </ContentView>
        <Label text="A test label"/>
    </StackLayout>
</ScrollView>

Когда компонент установлен, я хочу установить высоту mapContainer примерно на 75% от высоты экрана. Для этого у меня есть:

export default {
    name: "MyPage",

    mounted () {
        this.$refs.mapContainer.height = platform.screen.mainScreen.heightDIPs
    }

    ...

}

Но это ничего не дает, и ContentView остается высотой 500dp.

height предназначен для установки, но я полагаю, что мне не хватает перерисовки (?), Чтобы это изменение вступило в силу, но не знаю, как это сделать?


person codinghands    schedule 26.11.2018    source источник


Ответы (1)


Чтобы получить доступ к ContentView через ссылки, вы должны использовать свойство .nativeView.

this.$refs.mapContainer.nativeView.height = platform.screen.mainScreen.heightDIPs

Также вам не нужно рассчитывать высоту, а просто установите высоту в процентах (70%) вместо фиксированного значения (500) или используйте GridLayout с 7 разделами (7 *).

person Manoj    schedule 26.11.2018
comment
Отлично работает, спасибо. По какой-то причине компоненту Mapbox требуется фиксированная высота в ScrollView, иначе он не будет отображаться. - person codinghands; 26.11.2018