9

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

4

2 回答 2

20

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

安卓：

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方向。

于 2018-09-18T08:07:06.037 回答
0

如果您只想将 rtl 应用于某些而不是所有文本，则应将该行代码替换为 I18nManager.allowRTL(true);

然后将 textAlign: "right" 添加到要对齐的文本中

于 2021-10-19T04:46:34.283 回答