React Native Android端WebView滚动时顶部过度滚动效果隐藏方法

算力阿峰

2026-5-25

如何在React Native Android平台下隐藏WebView的顶部过度滚动效果？

在Android平台上，React Native的WebView默认会在滚动到内容边界时显示过度滚动的阴影/回弹效果，要去掉这个效果其实很简单，直接利用WebView针对Android提供的专属属性就能搞定。

解决方案：使用`androidOverScrollMode`属性

只需要给你的WebView组件添加androidOverScrollMode="never"这个属性，就能完全禁用过度滚动效果。这个属性是React Native专门为Android平台设计的，可选取值包括：

'always'：默认值，始终显示过度滚动效果
'never'：完全禁用过度滚动效果
'ifContentScrolls'：只有当内容高度超过容器时才显示过度滚动效果

修改后的代码示例

下面是基于你提供的代码修改后的完整版本：

import React from 'react';
import { StyleSheet, View, WebView } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.statusBar} />
        <WebView
          source={{uri: 'https://example.com'}}
          renderError={() => alert('Merci de vérifier votre connexion Internet')}
          // 添加该行禁用过度滚动效果
          androidOverScrollMode="never"
        />
      </View>
    );
  }
}

// 补充样式定义（保证代码完整性）
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  statusBar: {
    height: Constants.statusBarHeight,
    backgroundColor: '#ffffff',
  },
});