Справа налево для определенного текста в React-Native RTL

Версия React Native теперь 0.57, и пока нет нативной конфигурации для поддержки RTL.

Но для этого есть нативное решение. для IOS и Android используйте следующую конфигурацию:

IOS:

найдите файл AppDeligete.m в пути к проекту, затем импортируйте библиотеку RCTI18nUtil из React и поместите конфигурацию 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 в пути к проекту, затем импортируйте класс I18nUtil из com.facebook.react.modules.i18nmanager и поместите конфигурацию 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);
    }
}

Теперь перезапустите свои реагирующие нативные стеки. эти конфигурации требуют перезапуска процесса разработки. После перезапуска проект готов к RTL, для моего проекта все FlexBox поведения меняются на right to left. Повторяю, ВСЕ ПОВЕДЕНИЕ.

ПРИМЕЧАНИЕ. В Android все компоненты react native изменятся на направление RTL, но в IOS для направления справа налево компонента react native Text используйте writingDirection: 'rtl' код стиля.

ВНИМАНИЕ: использование textAlign: 'right/left/center' — это другая концепция. Направление RTL/LTR.