React Native 应用对从右到左布局的支持
将应用发布到应用商店后,国际化是扩大受众范围的下一步。全球有 20 多个国家和众多人口使用从右到左(RTL)语言。因此,让你的应用支持 RTL 对他们来说是必要的。
我们很高兴地宣布,React Native 已得到改进以支持 RTL 布局。该功能现已在 react-native 的 master 分支中可用,并将在下一个 RC 版本 v0.33.0-rc
中发布。
这涉及到修改 RN 使用的核心布局引擎 css-layout、RN 核心实现以及特定的开源 JS 组件以支持 RTL。
为了在生产环境中测试 RTL 支持,最新版本的 Facebook Ads Manager 应用(第一个 100% RN 的跨平台应用)现已支持阿拉伯语和希伯来语的 RTL 布局,适用于 iOS 和 Android。以下是它在这些 RTL 语言中的显示效果:


RN 中对 RTL 支持的概览变更
css-layout 已经有了布局中 start
和 end
的概念。在从左到右(LTR)布局中,start
意味着 left
,end
意味着 right
。但在 RTL 中,start
意味着 right
,end
意味着 left
。这意味着我们可以让 RN 依赖 start
和 end
的计算来得出正确的布局,包括 position
、padding
和 margin
。
此外,css-layout 已经使每个组件的方向继承自其父级。这意味着,我们只需将根组件的方向设置为 RTL,整个应用就会翻转。
下图高层描述了这些更改
这些包括
- css-layout 对绝对定位的 RTL 支持
- 在 RN 核心实现中将
left
和right
映射到 shadow 节点的start
和end
- 并暴露一个 桥接工具模块 来帮助控制 RTL 布局
通过此次更新,当你允许应用使用 RTL 布局时
- 每个组件的布局都将水平翻转
- 如果你使用的是已支持 RTL 的开源组件,一些手势和动画将自动具有 RTL 布局
- 可能需要最少的额外工作才能使你的应用完全支持 RTL
让应用支持 RTL
-
为了支持 RTL,你首先应该为你的应用添加 RTL 语言包。
-
通过在原生代码开头调用
allowRTL()
函数,允许你的应用使用 RTL 布局。我们提供了此实用程序,以便仅在你的应用准备就绪时应用 RTL 布局。以下是一个示例:iOS
// in AppDelegate.m
[[RCTI18nUtil sharedInstance] allowRTL:YES];Android
// in MainActivity.java
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true); -
对于 Android,你需要将
android:supportsRtl="true"
添加到AndroidManifest.xml
文件中的<application>
元素中。
现在,当你重新编译应用并将设备语言更改为 RTL 语言(例如阿拉伯语或希伯来语)时,你的应用布局应该会自动切换为 RTL。
编写支持 RTL 的组件
通常,大多数组件已经支持 RTL,例如:
- 从左到右布局

- 从右到左布局

但是,有几种情况需要注意,你需要使用 I18nManager
。在 I18nManager
中,有一个常量 isRTL
用于判断应用布局是否为 RTL,以便你可以根据布局进行必要的更改。
具有方向含义的图标
如果你的组件包含图标或图片,它们在 LTR 和 RTL 布局中会以相同的方式显示,因为 RN 不会翻转你的源图片。因此,你应该根据布局样式翻转它们。
- 从左到右布局

- 从右到左布局

以下是根据方向翻转图标的两种方法:
-
为图片组件添加
transform
样式<Image
source={...}
style={{transform: [{scaleX: I18nManager.isRTL ? -1 : 1}]}}
/> -
或者,根据方向改变图片源
let imageSource = require('./back.png');
if (I18nManager.isRTL) {
imageSource = require('./forward.png');
}
return <Image source={imageSource} />;
手势和动画
在 Android 和 iOS 开发中,当你切换到 RTL 布局时,手势和动画与 LTR 布局相反。目前,在 RN 中,手势和动画不支持 RN 核心代码层面,而是在组件层面。好消息是,一些组件今天已经支持 RTL,例如 SwipeableRow
和 NavigationExperimental
。然而,其他带有手势的组件将需要手动支持 RTL。
说明手势 RTL 支持的一个好例子是 SwipeableRow
。
手势示例
// SwipeableRow.js
_isSwipingExcessivelyRightFromClosedPosition(gestureState: Object): boolean {
// ...
const gestureStateDx = IS_RTL ? -gestureState.dx : gestureState.dx;
return (
this._isSwipingRightFromClosed(gestureState) &&
gestureStateDx > RIGHT_SWIPE_THRESHOLD
);
},
动画示例
// SwipeableRow.js
_animateBounceBack(duration: number): void {
// ...
const swipeBounceBackDistance = IS_RTL ?
-RIGHT_SWIPE_BOUNCE_BACK_DISTANCE :
RIGHT_SWIPE_BOUNCE_BACK_DISTANCE;
this._animateTo(
-swipeBounceBackDistance,
duration,
this._animateToClosedPositionDuringBounce,
);
},
维护支持 RTL 的应用
即使在最初发布了支持 RTL 的应用后,你仍可能需要迭代新功能。为了提高开发效率,I18nManager
提供了 forceRTL()
函数,以便在不更改测试设备语言的情况下进行更快的 RTL 测试。你可能希望在应用中为此提供一个简单的开关。以下是 RNTester 中 RTL 示例的一个例子:
<RNTesterBlock title={'Quickly Test RTL Layout'}>
<View style={styles.flexDirectionRow}>
<Text style={styles.switchRowTextView}>forceRTL</Text>
<View style={styles.switchRowSwitchView}>
<Switch
onValueChange={this._onDirectionChange}
style={styles.rightAlignStyle}
value={this.state.isRTL}
/>
</View>
</View>
</RNTesterBlock>;
_onDirectionChange = () => {
I18nManager.forceRTL(!this.state.isRTL);
this.setState({isRTL: !this.state.isRTL});
Alert.alert(
'Reload this page',
'Please reload this page to change the UI direction! ' +
'All examples in this app will be affected. ' +
'Check them out to see what they look like in RTL layout.',
);
};
在开发新功能时,你可以轻松切换此按钮并重新加载应用以查看 RTL 布局。这样做的好处是无需更改语言设置即可测试,但某些文本对齐方式不会改变,这将在下一节中解释。因此,在发布前始终最好用 RTL 语言测试你的应用。
限制和未来计划
RTL 支持应该覆盖你应用的大部分用户体验;然而,目前仍有一些限制:
- Android 和 iOS 中的文本对齐行为不同
- 在 iOS 中,默认文本对齐方式取决于活动的语言包,它们始终位于一侧。在 Android 中,默认文本对齐方式取决于文本内容的语言,即英语将左对齐,阿拉伯语将右对齐。
- 理论上,这应该在所有平台上保持一致,但有些人在使用应用时可能更喜欢一种行为。可能需要更多的用户体验研究来找出文本对齐的最佳实践。
-
没有“真正的”左/右
如前所述,我们将 JS 侧的
left
/right
样式映射到start
/end
,所有代码中用于 RTL 布局的left
在屏幕上会变成“右”,代码中的right
在屏幕上会变成“左”。这很方便,因为你不需要过多更改你的产品代码,但这同时也意味着无法在代码中指定“真正的左”或“真正的右”。未来,可能需要允许组件独立于语言控制其方向。 -
让手势和动画的 RTL 支持更对开发者友好
目前,要使手势和动画兼容 RTL 仍然需要一些编程工作。未来,理想的做法是找到一种方式,使手势和动画的 RTL 支持对开发者更加友好。
试一试!
查看 RNTester
中的 RTLExample
,以了解更多 RTL 支持的信息,并告诉我们它的效果如何!
最后,感谢您的阅读!我们希望 React Native 对 RTL 的支持能帮助您的应用拓展国际受众!