nativescript - 在 NativeScript 中创建可缩放标签

Question

我发现了一篇文章如何解释它为 Ios 创建它。 http://nuvious.com/Blog/2015/5/9/creating-a-scalable-label-in-nativescript

但是如何在Android中做到这一点。

这就是我尝试过的：

import {Label} from "tns-core-modules/ui/label";
function ScalingLabel() {
    this.myLabel = new Label();
    let TextViewCompat;
    if (androidx)
        TextViewCompat = androidx.core.widget.TextViewCompat;
    else
        TextViewCompat = android.support.v4.widget.TextViewCompat;
    TextViewCompat.setAutoSizeTextTypeUniformWithConfiguration(this.myLabel, 8, 100, 1, 2);
}

ScalingLabel.prototype = new Label();
exports.ScalingLabel = ScalingLabel;

Vue.registerElement('ScalingLabel', ScalingLabel);

我收到以下错误：

[Vue 警告]：v-on 处理程序中的错误：“TypeError：无法加载视图：nativescalinglabel。错误：无法将对象转换为 Landroid/widget/TextView；在索引 0”

标签： nativescriptnativescript-vue

Answer 1

您不应该创建一个实例，而是扩展原始类。

class ScalingLabel extends Label {
    initNativeView() {
        super.initNativeView();
        if (this.android) {
            androidx.core.widget.TextViewCompat.setAutoSizeTextTypeUniformWithConfiguration(this.nativeViewProtected, 10, 100, 1, android.util.TypedValue.COMPLEX_UNIT_SP);
        }
    }
}

Vue.registerElement('ScalingLabel', () => ScalingLabel);

然后在你的组件中尝试，

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ScrollView>
            <StackLayout class="form">
                <TextField class="m-15 input input-border" v-model="message">
                </TextField>
                <Label :text="message" class="m-5 h3" />
                <ScalingLabel :text="message" class="m-5 h3" height="30"
                    width="100%" textWrap="true" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    export default {
        data() {
            return {
                message: ""
            };
        }
    };
</script>