javascript - 如何默认将 NativeScript 设置为 RTL 布局

标签 javascript android typescript nativescript angular2-nativescript

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

但是布局并没有真正发生任何变化!还是和LTR一样

( I tried the plugin on tabs sample from 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
);

然后我在 app.component.html

上使用了元素 RStackLayout
<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 元素

最佳答案

TabViewloaded 事件中,您可以将布局方向设置为 RTL

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

如果您还没有安装 tns-platform-declarations,请使用 declare 语句。

declare var android;

关于javascript - 如何默认将 NativeScript 设置为 RTL 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58192530/

相关文章:

javascript - 是否有任何使用@HostListener 改变方向的窗口事件,就像我们有@HostListener ("window:scroll", ['$event' ]) 用于滚动?

javascript - 在 IE 中将表解析为数组对象的有效方法

安卓偏好设置。如何强制更新设置了 SummaryProvider 的首选项摘要?

typescript - 在选择复选框时启用提交按钮 - 角度 5

c# - 在运行时动态添加 Javascript Silverlight 4

javascript - webcomponents-lite.js 中的错误

android - android中.mk文件的用途是什么

Android - 套接字与轮询

javascript - RxJs 从 Promise 扩展数组

typescript:自动为构造函数的所有命名参数创建 getter