web-dev-qa-db-ja.com

反応ネイティブRTLの特定のテキストの右から左

私はreactnativeでアラビア語のアプリを開発しています。ネイティブベースのタブとメニューを使用しました。単語が1つしかないため、正しく配置しました。しかし今、私は右から左に整列した文章を書かなければなりません。特定のテキストにRTL形式を設定する方法はありますか？I18nManager.forceRTL(true);を設定すると、アプリ全体でRTL形式が変更され、以前の作業がすべて台無しになり、タブが正しく機能しなくなります。助けてください 。

react-nativeright-to-leftnative-base
8
Asad

React Nativeバージョンは現在0.57であり、RTLサポートのreactNative構成はまだありません。

しかし、そのためのネイティブソリューションがあります。 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

Android：

プロジェクトパスでMainApplication.Javaファイルを検索し、I18nUtilからcom.facebook.react.modules.i18nmanagerクラスをインポートし、MainApplication関数の後のonCreate内にRTL構成を配置します。私の設定を入れた後、あなたは以下のコードを持っているでしょう：

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

次に、ReactNativeスタックを再実行します。これらの構成では、開発プロセスを再開する必要があります。再起動後、プロジェクトはRTLの準備が整いました。私のプロジェクトでは、すべてのFlexBoxの動作がright to leftに変更されます。私はそれを繰り返します、すべての行動。

[〜＃〜] note [〜＃〜]：Androidでは、すべてのreact nativeコンポーネントがRTL方向ですが、[〜＃〜] ios [〜＃〜]react nativeTextコンポーネントの右から左の方向には、writingDirection: 'rtl'スタイルコードを使用します。

[〜＃〜]注意[〜＃〜]：textAlign: 'right/left/center'の使用は別の概念ですRTL/LTR方向。

15
AmerllicA