默认情况下如何将NativeScript设置为RTL布局

时间:2019-10-01 21:32:27

标签: javascript android typescript nativescript angular2-nativescript

我正在构建一个阿拉伯语应用程序,因此它是RTL语言,我试图安装该软件包@nativescript-rtl/ui

但是布局实际上什么都没有发生!还是和LTR一样

  

(我从NativeScript angular尝试了选项卡上的插件)

然后我在app.module.ts上注册了RTL元素,就像文档中显示的一样:

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,但是Tabs不是RTL!如何将其强制为RTL元素

1 个答案:

答案 0 :(得分:0)

loaded的{​​{1}}事件中,您可以将布局方向设置为TabView

RTL

如果尚未安装onTabViewLoaded(event) { if (event.object.android) { event.object.android.setLayoutDirection(android.util.LayoutDirection.RTL); } } ,请使用声明语句。

tns-platform-declarations