Question

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

Answer 1

React Native版本现在是0.57，并且尚无对RTL支持的react本机配置。

但是有一个本机解决方案。适用于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类，并在MainApplication函数之后将RTL配置放入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方向的另一种概念。

反应原生RTL中的特定文本从右到左

1 个答案: