Как установить NativeScript как RTL Layout по умолчанию - PullRequest
Новая
       9

Как установить NativeScript как RTL Layout по умолчанию

0 голосов
/ 02 октября 2019

Я создаю арабское приложение, поэтому на языке RTL я пытался установить этот пакет @nativescript-rtl/ui.

Но с макетом ничего не происходит! все так же, как LTR

(я попробовал подключаемый модуль на вкладках образца из NativeScript angular)

Затем я зарегистрировал элементы для RTL на app.module.ts, как показано надокументы: 

import * as rtl from '@nativescript-rtl/ui'

registerElement(
    "RGridLayout",
    () => rtl.GridLayout
);
registerElement(
    "RWrapLayout",
    () => rtl.WrapLayout
);
registerElement(
    "RAbsoluteLayout",
    () => rtl.AbsoluteLayout
);
registerElement(
    "RDockLayout",
    () => rtl.DockLayout
);
registerElement(
    "RStackLayout",
    () => rtl.StackLayout
);

Затем я использовал элементы RStackLayout на app.component.html

<RStackLayout>
    <Tabs selectedIndex="0" tabsPosition="bottom">
        <TabStrip>
            <!--
                Besides the approach demonstrated below there is alternative shorthand syntax for setting TabStripItem title and icon:

                <TabStripItem title="Home" iconSource="res://tabIcons/home" />

                Both shorthand and verbose syntax can use
                TabStripItem Label {...} css selector to style the title label,
                and TabStriptItem Image {...} css selector to style the icon image (see _app-common.scss).
                Note that when working with font icons we recommend the usage of the verbose syntax as it
                is explicit and describes better the need to provide font icon as well as set the respective font (e.g. via class name).
             -->
            <TabStripItem>
                <!--
                    Note TabStripItem will only accept single Label and/or single Image elements that it
                    will "adopt"; any other layout elements you try to specify will be ignored
                -->
                <Label text="Home"></Label>
                <Image src="font://&#xf015;" class="fa t-36"></Image>
            </TabStripItem>
            <TabStripItem>
                <Label text="Browse"></Label>
                <Image src="font://&#xf1ea;" class="fa t-36"></Image>
            </TabStripItem>
            <TabStripItem>
                <Label text="Search"></Label>
                <Image src="font://&#xf002;" class="fa t-36"></Image>
            </TabStripItem>
        </TabStrip>

        <TabContentItem>
            <page-router-outlet name="homeTab"></page-router-outlet>
        </TabContentItem>

        <TabContentItem>
            <page-router-outlet name="browseTab"></page-router-outlet>
        </TabContentItem>

        <TabContentItem>
            <page-router-outlet name="searchTab"></page-router-outlet>
        </TabContentItem>
    </Tabs>

</RStackLayout>

Обновление:

Я попробовал текст на арабскоми он перенаправлен в RTL, но вкладки не RTL! как заставить его как элемент RTL

1 Ответ

0 голосов
/ 02 октября 2019

В loaded событии TabView вы можете установить направление макета на RTL. 

onTabViewLoaded(event) {
    if (event.object.android) {
        event.object.android.setLayoutDirection(android.util.LayoutDirection.RTL);
    }
}

Использовать объявление оператора, если вы не установили tns-platform-declarations. 

declare var android;
...