在 NativeScript 中创建可缩放标签

Question

我找到了 post 如何解释如何为 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 warn]: Error in v-on handler: "TypeError: Could not load view for: nativescalinglabel. Error: Cannot convert object to Landroid/widget/TextView; at index 0"

Answer 1

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

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>

在 NativeScript 中创建可缩放标签

Creating a Scalable Label in NativeScript

nativescript

nativescript-vue