React Native中使用NativeWind时overflow-scroll失效问题求助

问题根源 #

你的代码存在几个影响滚动功能的关键问题：

• 嵌套的View使用h-screen与外层SafeAreaView的flex:1冲突，导致容器高度计算异常
• Box组件的flex:1会让每个子元素试图占满父容器空间，打乱整体布局
• React Native中View的overflow-scroll支持有限，官方更推荐使用ScrollView实现跨平台滚动

修复方案 #

1. 替换滚动容器为ScrollView

直接使用React Native内置的ScrollView替代View作为滚动容器，这是实现跨平台滚动的标准方案，NativeWind同样支持为其添加样式类。

2. 调整容器与子元素布局

去掉外层容器的h-screen，让ScrollView自适应父容器空间；同时移除Box组件的flex:1，避免子元素过度拉伸。

修改后的完整代码

App.js

import { StatusBar } from "expo-status-bar";
import { Text, ScrollView, SafeAreaView } from "react-native";
import Box from "./components/box";
import SafeViewAndroid from "./SafeViewAndroid";

export default function App() {
  return (
    <SafeAreaView style={SafeViewAndroid.AndroidSafeArea}>
      <StatusBar style="auto" />
      {/* 用ScrollView替代View，通过flex:1占满父容器剩余空间 */}
      <ScrollView className="flex-1">
        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((_, i) => (
          <Box key={i} />
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

components/box.js

import React from "react";
import { View, Text } from "react-native";

const Box = () => {
  return (
    {/* 移除flex:1，让Box保持设定的高度 */}
    <View className="h-10 w-screen border-2 border-gray-800 items-center justify-center">
      <Text>Box</Text>
    </View>
  );
};

export default Box;

SafeViewAndroid.js（保持原有代码不变）

import { StyleSheet, Platform, StatusBar } from "react-native";

export default StyleSheet.create({
  AndroidSafeArea: {
    flex: 1,
    backgroundColor: "#FFF",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
  },
});

额外说明 #

• 如果坚持要用View的overflow-scroll，需要确保容器有明确的、不超过屏幕的固定高度，同时子元素总高度超过容器高度，但这种方式在Android和iOS上的一致性远不如ScrollView
• NativeWind的类名与React Native属性一一对应，overflow-scroll对应RN的overflow: 'scroll'，但原生RN的View滚动并非主打实现方案

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