React Native FlashList在Android RTL模式下显示异常求助

问题现象 #

React Native项目使用FlashList实现水平列表，在iOS及Android LTR模式下显示正常，但Android RTL模式下列表项会短暂显示后迅速消失，仅留下空白屏幕；移除horizontal属性后，垂直列表可正常显示。

环境版本 #

• FlashList：1.6.4（测试所有新版本未解决问题）
• Expo SDK：50.0.20
• React Native：0.73.6

可能的解决方案 #

1. 给FlashList显式设置LTR方向 #

仅在父View设置direction: 'ltr'可能无法完全覆盖FlashList内部的RTL布局计算逻辑，直接给FlashList添加direction属性强制LTR：

<FlashList
  // 保留原有属性
  direction="ltr"
/>

2. 调整inverted属性的RTL适配 #

inverted={true}在RTL水平列表中可能引发布局偏移冲突，尝试根据系统方向动态控制该属性：

import { I18nManager } from 'react-native';

// ...

<FlashList
  inverted={!I18nManager.isRTL} // RTL模式下关闭列表反转
  // 保留原有属性
/>

3. 修正尺寸计算与snapToInterval #

RTL模式下自定义尺寸工具RW(100)可能出现计算偏差，改用Dimensions获取系统准确宽度：

import { Dimensions } from 'react-native';
const { width: windowWidth, height: windowHeight } = Dimensions.get('window');

// ...

<FlashList
  snapToInterval={windowWidth}
  estimatedItemSize={windowWidth}
  estimatedListSize={{ width: windowWidth, height: windowHeight }}
  // 保留原有属性
/>

4. 移除disableHorizontalListHeightMeasurement #

该属性可能导致RTL模式下列表高度计算异常，尝试移除后测试：

<FlashList
  // 移除 disableHorizontalListHeightMeasurement={true}
  // 保留原有属性
/>

5. 修复renderItem中的绝对定位逻辑 #

renderItem内的高亮View使用left属性，在RTL布局中left会对应视觉上的右侧，需动态切换left/right：

// 高亮View的style调整
{
  width: focusedVerse.filter((val: any) => val.line === index)[0].width,
  height: RH(5.375),
  top: 0,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#ffd5b5',
  position: 'absolute',
  zIndex: -1,
  left: I18nManager.isRTL ? undefined : `${focusedVerse.filter((val: any) => val.line === index)[0].left * 100}%`,
  right: I18nManager.isRTL ? `${(1 - focusedVerse.filter((val: any) => val.line === index)[0].left) * 100}%` : undefined,
}

6. 临时禁用全局RTL验证 #

在app.json中关闭RTL支持，验证问题是否由全局RTL设置导致：

{
  "expo": {
    "ios": {
      "supportsRtl": false
    },
    "android": {
      "supportsRtl": false
    }
  }
}

调试辅助技巧 #

给FlashList和列表项添加边框样式，直观查看元素实际布局位置：

<FlashList
  style={{ borderWidth: 2, borderColor: 'red' }}
  renderItem={({ item }) => (
    <View style={{ borderWidth: 1, borderColor: 'blue', width: windowWidth }}>
      {/* 原有renderItem内容 */}
    </View>
  )}
/>

内容的提问来源于stack exchange，提问作者Omar Zaoujal