根据设备高度在 ScrollView 中动态调整 Nativescript ContentView 的大小答案

【问题标题】：Dynamically size Nativescript ContentView within ScrollView based on device height根据设备高度在 ScrollView 中动态调整 Nativescript ContentView 的大小
【发布时间】：2019-04-28 06:27:59
【问题描述】：

我有一个 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 本来是一个二传手，但我想我错过了重绘 (?) 以使此更改生效，但不确定如何？

【问题讨论】：

标签： nativescript nativescript-vue

【解决方案1】：

要通过引用访问ContentView，您必须使用.nativeView 属性。

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

此外，您不必计算高度，只需以百分比 (70%) 而非固定值 (500) 设置高度，或者使用具有 7 个分区 (7*) 的 GridLayout。

【讨论】：

完美运行，谢谢。由于某种原因，Mapbox 组件需要在 ScrollView 中固定高度，否则它不会呈现。