react-native RTL 中的特定文本从右到左 [英] Right to left for specific text in react-native RTL

问题描述

我正在 react native 中用阿拉伯语开发应用程序，我使用了 native base 中的选项卡和菜单.我已经对齐了，因为只有一个词.但现在我必须写从右到左对齐的句子.有没有办法为特定文本设置 RTL 格式，因为当我设置 I18nManager.forceRTL(true); 时，它为整个应用程序更改了它，我以前的工作全部毁了，选项卡无法正常工作.请帮忙 .

解决方案

React Native 版本现在是 0.57，并且没有针对 的 react native 配置RTL 支持.

但是有一个本地解决方案.IOS 和 Android 使用以下配置:

IOS:

在你的项目路径中搜索AppDeligete.m 文件，然后从React 中导入RCTI18nUtil 库并将RTL 配置放入didFinishLaunchingWithOptions 类.放入我的配置后，您将获得以下代码:

/* AppDeligete.m */#import //<== 美国配置#import "AppDelegate.h"#import #import @implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{[[RCTI18nUtil sharedInstance] allowRTL:YES];//<== 美国配置[[RCTI18nUtil sharedInstance] forceRTL:YES];//<== 美国配置NSURL *jsCodeLocation;jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation模块名称:@"rntest"初始属性:无启动选项:启动选项];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];返回是；}@结尾

安卓:

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

/* MainAppliaction.java */包com.rntest;导入 android.app.Application;导入 com.facebook.react.ReactApplication;导入 com.oblador.vectoricons.VectorIconsPackage;导入 com.facebook.react.ReactNativeHost;导入 com.facebook.react.ReactPackage;导入 com.facebook.react.shell.MainReactPackage;导入 com.facebook.soloader.SoLoader;导入 java.util.Arrays;导入 java.util.List;导入 com.facebook.react.modules.i18nmanager.I18nUtil;//<== 美国配置公共类 MainApplication 扩展应用程序实现 ReactApplication {私有最终 ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {@覆盖公共布尔 getUseDeveloperSupport() {返回 BuildConfig.DEBUG;}@覆盖受保护列表获取包(){返回数组.asList(新的 MainReactPackage(),新的 VectorIconsPackage());}@覆盖受保护的字符串 getJSMainModuleName() {返回索引"；}};@覆盖公共 ReactNativeHost getReactNativeHost() {返回 mReactNativeHost;}@覆盖公共无效 onCreate() {super.onCreate();I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();//<== 美国配置sharedI18nUtilInstance.forceRTL(this, true);//<== 美国配置sharedI18nUtilInstance.allowRTL(this, true);//<== 美国配置SoLoader.init(this,/* native exopackage */false);}}

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

注意:在 Android 中，所有 react native 组件将更改为 RTL 方向，但在 IOSreact native Text 组件的从右到左方向，使用writingDirection: 'rtl' 样式代码.

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

I am developing app in arabic in react native , i have used the tabs and menu from native base. i have aligned right because there is only single word . but now i have to write sentence which is right to left aligned. Is there way to set RTL format for specific text because when i set the I18nManager.forceRTL(true); it changed it for whole app and my previous work is all ruined and tabs not work correctly . please help .

解决方案

The React Native version is 0.57 now, And there is no react native configuration for RTL support yet.

But there is a native solution for it. for IOS and Android use below configuraion:

IOS:

search for AppDeligete.m file in your project path, then import RCTI18nUtil library from React and put RTL configuration inside didFinishLaunchingWithOptions class. After putting my configs, you will have below code:

/* 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:

search for MainApplication.java file in your project path, then import I18nUtil class from com.facebook.react.modules.i18nmanager and put RTL configuration inside MainApplication after onCreate function. After putting my configs, you will have below code:

/* 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);
    }
}

Now rerun your react native stacks. these configurations need to restart the development process. After the restart, the project is ready for RTL, for my project all FlexBox behavior change to right to left. I repeat it, ALL OF BEHAVIOR.

NOTE: In Android, all of react native components will change to RTL direction but in IOS for the right to left direction of react native Text component, use writingDirection: 'rtl' style code.

ATTENTION: Using textAlign: 'right/left/center' is a different concept The RTL/LTR direction.

这篇关于react-native RTL 中的特定文本从右到左的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！