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

2023年12月27日 406次阅读

我正在开发阿拉伯语的应用程序本机,我已经使用了原生基地的选项卡和菜单.我已经对齐,因为只有一个单词.但现在我必须写一个右对齐的句子.有没有办法为特定文本设置RTL格式,因为当我设置I18nManager.forceRTL(true);它改变了它为整个应用程序和我以前的工作都毁了,标签不能正常工作.请帮忙 . 最佳答案 React Native版本现在是0.57,并且还没有针对RTL支持的反应本机配置.

但它有一个原生的解决方案.对于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

安卓：

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

/* 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行为都从右向左更改.我重复一遍,所有的行为.

注意：在Android中,所有反应本机组件都将更改为RTL方向,但在IOS中从右到左反应本机Text组件的方向,请使用writingDirection：’rtl’样式代码.

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

点赞