React Native 中特定文本的从右到左（RTL）显示问题

Question

我正在使用React Native开发一款阿拉伯文应用，我使用了Native Base的标签页和菜单。因为只有一个单词，所以我将它们对齐到右侧。但现在我需要写一个从右到左对齐的句子。有没有一种方法可以为特定的文本设置RTL格式？因为当我设置I18nManager.forceRTL(true);时，整个应用程序都会改变，我的之前的工作都被破坏了，而且选项卡也无法正常工作。请帮忙解决。

- Asad

Answer 1

React Native 版本目前为 0.57，但是目前还没有针对RTL支持的react native配置。

不过有一种原生解决方案可用。对于IOS和Android，请使用以下配置：

IOS:

在您的项目路径中查找AppDeligete.m文件，然后从React导入RCTI18nUtil库，并将RTL配置放置到didFinishLaunchingWithOptions类中。 在添加我的配置之后，您将具有以下代码：

/* AppDeligete.m */
#import <React/RCTI18nUtil.h> //<== AmerllicA config
#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>


@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [[RCTI18nUtil sharedInstance] allowRTL:YES]; //<== AmerllicA config
  [[RCTI18nUtil sharedInstance] forceRTL:YES]; //<== AmerllicA config

  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"rntest"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

Android:

在你的项目路径中搜索MainApplication.java文件，然后从com.facebook.react.modules.i18nmanager导入I18nUtil类，并将RTL配置放置在MainApplication的onCreate函数之后。在添加我的配置之后，您将拥有以下代码：

/* MainAppliaction.java */

package com.rntest;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.oblador.vectoricons.VectorIconsPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

import com.facebook.react.modules.i18nmanager.I18nUtil; //<== AmerllicA config


public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new VectorIconsPackage()
            );
        }

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance(); //<== AmerllicA config
        sharedI18nUtilInstance.forceRTL(this, true); //<== AmerllicA config
        sharedI18nUtilInstance.allowRTL(this, true); //<== AmerllicA config

        SoLoader.init(this, /* native exopackage */ false);
    }
}

现在重新运行您的React Native堆栈。这些配置需要重新启动开发过程。重启后，项目已准备好支持RTL，对于我的项目，所有FlexBox行为都会变为从右到左。我再重复一遍，所有的行为都会改变。

注意: 在Android中，所有的React Native组件都将变为RTL方向，但在IOS中，针对React Native Text组件的right to left方向，请使用writingDirection: 'rtl'样式代码。

注意: 使用textAlign: 'right/left/center'是与RTL/LTR方向不同的概念。

- AmerllicA

---

强制RTL的最佳答案，喜欢它。 - Rondev

Answer 2

如果您只想将RTL应用于部分文本而不是全部文本，则应使用以下代码替换该行代码：I18nManager.allowRTL(true); 然后，在要对齐的文本中添加textAlign："right"。

- Amer NM

Answer 3

同时，alignSelf: 'flex-start'|'flex-end' 可以用于在从 rtl 切换到 ltr 方向时正确地放置 Text 组件。

- Vyacheslav Orlovsky