1

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

但是布局并没有真正发生任何事情！还是和 LTR 一样

（我在 NativeScript angular 的 tabs 示例上尝试了插件）

然后我注册了 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 元素

4

1 回答 1

0

如果您可以将布局方向设置loaded为。TabViewRTL

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

如果尚未安装，请使用声明语句tns-platform-declarations。

declare var android;
于 2019-10-02T07:59:36.310 回答