React Native多列FlatList安卓无法横向滚动但iOS正常

问题现象 #

使用React Native开发扫雷游戏时，iOS端可正常支持横向、纵向双向滚动，但安卓端仅能实现纵向滚动，无法横向滑动查看完整棋盘，修改视图布局、内容对齐规则均未解决。
核心复现代码如下：

const Board = (
    {game}: {game: Game}
) => {

    //...

    return (
        <SafeAreaView
            style={styles.main}
        >
            <FlatList
                style={styles.flatList}
                contentContainerStyle={styles.contentContainer}
                data={game.board.grid.flat()}
                numColumns={game.size} // n x n grid, so n columns
                columnWrapperStyle={{ flexWrap: "nowrap" }}
                renderItem={({ item: square }) => {
                    return (
                        <TouchableOpacity style={Styles.square}>
                            {/* ... */}
                        </TouchableOpacity>
                    );
                }}
            />
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    main: {
        flex: 1,
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "black"
    },
    flatList: {

    },
    contentContainer: {
        flexGrow: 1,
        justifyContent: "center"
    },
    square: {
        width: 35,
        height: 35,
        justifyContent: "center",
        alignItems: "center",
        margin: 1
    }
});

运行截图：

根因分析 #

双端滚动表现差异来自React Native底层ScrollView（FlatList基于ScrollView封装）的默认行为不同：

• iOS端ScrollView默认允许内容超出容器时自动识别滚动方向，无需额外配置即可支持双向滚动
• 安卓端ScrollView默认仅支持单方向滚动，且使用numColumns属性的FlatList会强制压缩列宽适配父容器宽度，即使设置了flexWrap: 'nowrap'也不会让内容横向溢出，自然无法触发横向滚动
  代码存在三个直接导致问题的遗漏点：
• 未开启安卓端双向滚动必需的nestedScrollEnabled属性
• 未给行容器、内容容器设置固定宽度，安卓端无法识别内容横向溢出
• contentContainer设置了flexGrow: 1、父容器设置了alignItems: 'center'，会强制压缩内容宽度适配父容器，进一步阻止内容横向溢出

修复方案 #

1. 先计算棋盘实际总宽度，作为内容容器、行容器的固定宽度依据
2. 调整容器样式，移除会压缩内容宽度的属性，给内容、行容器设置固定宽度
3. 给FlatList添加安卓端双向滚动必需的配置属性

修改后的完整核心代码：

const Board = (
    {game}: {game: Game}
) => {
    // 固定单格尺寸、边距，计算棋盘总宽度
    const SQUARE_SIZE = 35;
    const SQUARE_MARGIN = 1;
    const BOARD_TOTAL_WIDTH = (SQUARE_SIZE + SQUARE_MARGIN * 2) * game.size;

    //...

    return (
        <SafeAreaView
            style={styles.main}
        >
            <FlatList
                style={styles.flatList}
                contentContainerStyle={[styles.contentContainer, {width: BOARD_TOTAL_WIDTH}]}
                data={game.board.grid.flat()}
                numColumns={game.size}
                // 行容器取消弹性伸缩，设置固定宽度，禁止压缩列宽
                columnWrapperStyle={{ 
                    flexWrap: "nowrap",
                    flex: 0,
                    width: BOARD_TOTAL_WIDTH
                }}
                // 安卓端双向滚动必需配置
                nestedScrollEnabled={true}
                scrollEnabled={true}
                removeClippedSubviews={false}
                renderItem={({ item: square }) => {
                    return (
                        <TouchableOpacity style={[styles.square, {
                            width: SQUARE_SIZE,
                            height: SQUARE_SIZE,
                            margin: SQUARE_MARGIN
                        }]}>
                            {/* ... */}
                        </TouchableOpacity>
                    );
                }}
            />
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    main: {
        flex: 1,
        flexDirection: "column",
        // 改为flex-start避免大宽度内容被居中裁剪
        alignItems: "flex-start",
        justifyContent: "center",
        backgroundColor: "black"
    },
    flatList: {
        flex: 1,
        width: '100%'
    },
    contentContainer: {
        // 移除flexGrow:1，避免强制撑满父容器压缩宽度
        justifyContent: "center",
        alignSelf: 'flex-start'
    },
    square: {
        justifyContent: "center",
        alignItems: "center",
    }
});

兼容兜底 #

如果使用的React Native版本较低，上述修改后仍存在滚动异常，可以直接弃用numColumns配置，改用手动按行渲染棋盘：将二维棋盘数据按行切分，外层用ScrollView承载，直接渲染每一行的格子容器，可控性更高，不会出现FlatList列布局的兼容问题。

内容的提问来源于stack exchange，提问作者Jose Miralles