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

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

框架

我在用 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

我来解答赞 7 收藏

反馈

2 条解答

ლ俊荣 Lv1

RN端ScrollView滚不动，基本都是高度没设对。height: '100%'在RN这里不吃香，父容器没高度的话它就不知道该滚动多长。

试试这样改：

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

import Taro from '@tarojs/taro'



export default function MyPage() {

  const screenHeight = Taro.getSystemInfoSync().windowHeight

  

  return (

    <ScrollView 

      scrollY      enableScroll 

      style={{ height: screenHeight + 'px' }}

    >

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

        <View key={i} style={{ padding: 20, backgroundColor: '#f0f0f0' }}>

          <Text>Item {i + 1}</Text>

        </View>

      ))}

    </ScrollView>

  )

}

直接取屏幕高度赋值，比百分比靠谱多了。RN不像H5会自动撑满整屏。

另外确认下你的Taro版本，老版本有些已知bug，3.x系列相对稳一些。要还是不行，检查下外层有没有嵌套什么会拦截触摸事件的组件。

2026-03-12 06:03

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