Taro 编译到 RN 时 ScrollView 滚动失效怎么办？

司马文雅提问于 2026-03-09 14:35:25 阅读 5

框架

我在用 Taro 开发多端应用，H5 和微信小程序都正常，但编译到 React Native 后，页面里的 ScrollView 完全不能滚动，手指滑动没反应，这是啥情况？

我试过加 style 高度、嵌套 View，也查了 Taro 的文档说 RN 端要用 enableScroll，但加了也没用。下面是我写的组件代码：

import { ScrollView, View, Text } from '@tarojs/components'

export default function MyPage() {
  return (
    <ScrollView scrollY enableScroll style={{ height: '100%' }}>
      {[...Array(20)].map((_, i) => (
        <View key={i} style={{ padding: 20, backgroundColor: '#f0f0f0' }}>
          <Text>Item {i + 1}</Text>
        </View>
      ))}
    </ScrollView>
  )
}

真机调试（iOS）完全滚不动，控制台也没报错，有谁遇到过类似问题吗？

RN适配 Taro

我来解答赞 3 收藏

反馈

1 条解答

Air-晓芳 Lv1

遇到这种 ScrollView 在 RN 端不滚动的问题确实挺烦的，我之前也踩过这个坑。核心问题是 RN 端的 ScrollView 需要明确的 contentContainerStyle 高度才能正常工作。

给你个修复方案：

export default function MyPage() {

  return (

    
      scrollY 

      enableScroll 

      style={{ flex: 1 }}  // 这个很关键，必须给 flex:1

      contentContainerStyle={{ paddingBottom: 20 }} // 这个也要有，可以自定义padding

    >

      {[...Array(20)].map((_, i) => (

        

          Item {i + 1}

        

      ))}

    

  )

}

安全提醒：
1. 一定要校验 style 属性，确保不是 null 或者 undefined，RN 对样式校验很严格
2. 测试时建议先用少量内容验证，避免数据量太大导致其他问题
3. 真机调试要检查 flex 布局是否正确，有时候父容器的高度设置不对也会导致滚动失效

补充说明：RN 端的 ScrollView 和 Web 端的行为差异挺大的，flex:1 是必须的，不然容器不知道如何分配空间。如果还是不行，建议检查下外层容器是不是也有高度限制。

2026-03-09 15:01