Создание масштабируемой метки в NativeScript

Я нашел сообщение, как объясняет, как создать его для 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»


nativescript nativescript-vue
person Steven    schedule 09.10.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы не должны создавать экземпляр, но расширяете исходный класс.

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>
person Manoj    schedule 09.10.2019
comment
У меня есть дополнительный вопрос. Я играю с этим. Но я заметил, что когда я не устанавливаю высоту, я действительно не меняю размер, пока она полностью не видна. imgur.com/a/24mhWWR Первый имеет фиксированную высоту 12, второй - нет. иметь высоту. Проблема в том, что когда у меня текст меньшего размера с фиксированной высотой 12, его трудно увидеть, потому что он не может быть больше. - person Steven; 09.10.2019
comment
Всегда старайтесь устанавливать высоту как минимум на 10 пунктов больше размера шрифта. - person Manoj; 09.10.2019
comment
Спасибо за комментарий, ничего не менял. - person Steven; 09.10.2019
comment
Приведенный выше пример отлично работает с моей стороны. Если у вас есть проблемы, поделитесь образцом игровой площадки и деталями вашего тестового устройства. - person Manoj; 09.10.2019