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

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

0 голосов
/ 26 ноября 2018

У меня есть шаблон компонента 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 предназначено для установки, но я полагаюМне не хватает перерисовки (?), Чтобы изменения вступили в силу, но не уверен, как?

1 Ответ

0 голосов
/ 26 ноября 2018

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

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

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

...