注意:使用 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;}@endAndroid: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 configpublic 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 中的特定文本从右到左的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
07-23 04:08
查看更多