React Native Android WebView 如何禁用水平滚动？

Posted

技术标签:

【中文标题】React Native Android WebView 如何禁用水平滚动？【英文标题】：React Native Android WebView How to disable horizontal scroll? 【发布时间】：2018-08-15 19:19:43 【问题描述】：

我的 webview 和滚动有问题。我想禁用所有滚动。我使用scrollEnabled，对于ios，它工作正常。但是对于 android，不存在这样的属性。我尝试了很多脚本，但没有任何效果。

乍一看一切正常，但如果用户向右滑动，则文本/div 会移出屏幕。

这就是发生的事情

这是我的网页视图：

<WebView
  bounces=false
  ref=(element) =>  this.webViewRef = element; 
  javascriptEnabled
  scalesPageToFit=false
  onShouldStartLoadWithRequest=this._onShouldStartLoadWithRequest
  style=
    height: this.state.webViewHeight,
  
  scrollEnabled=false
  source=
    html: `
          <!DOCTYPE html>
          <html>
            <head>$injectedStyle(platformStyles.fontSizes.base || 16, webViewWidth)</head>
            <body>
              <div id="baseDiv" class="ex1">$content</div>
              $injectedJS
            </body>
          </html>
    `,
    baseUrl: 'http://s3.eu-central-1.amazonaws.com',
  
  onNavigationStateChange=this._processNavigationStateChange
  automaticallyAdjustContentInsets=false
/>

我尝试添加这样的样式（overflow: 'hidden' 但它不起作用）：

    const injectedStyle = (fontSize, widhtPlatform) => `<style type="text/css">
    ...
    body 
            display: flex;
            overflow: hidden;
            background-color: orange;
    ...
        
    div.ex1 
      overflow: hidden;
  background-color: coral;
  border: 1px solid blue;
    ...
    
    </style>`;

和 JS 禁用滚动：

const injectedJS = `
  <script>
    var scrollEventHandler = function()
      
        window.scroll(0, window.pageYOffset)
      
    document.addEventListener('scroll', scrollEventHandler, false);
    document.getElementById('scrollbar').style.display = 'block';
    document.body.style.overflow = 'hidden';

  </script>
`;

我们使用 RN：

react-native-cli: 2.0.1

react-native: 0.53.3

【问题讨论】：

【参考方案1】：

对于 Android，将 scalesPageToFit=false 更改为 scalesPageToFit=true。它会起作用的。

// ....
const scalesPageToFit = Platform.OS === 'android';

// .... 
return 
    <WebView
      scalesPageToFit=scalesPageToFit
      bounces=false
      scrollEnabled=false
// ....

更新：对于 rn-webview 的最新版本，取决于 html 内容，您可能还需要使用一些额外的 css 来定位有问题的内容：

max-width: 100%;

overflow-x: hidden;

和/或showsHorizontalScrollIndicator=false

【讨论】：

这在 android 中不起作用。我尝试了代码，但页面滚动。【参考方案2】： 
npm i react-native-render-html@foundry 

import HTML from 'react-native-render-html'

 <ScrollView style= flex: 1  showsVerticalScrollIndicator=false>
      <HTML 
       contentWidth=Dimensions.get('window').width
       onLinkPress=(e,href)=>onShouldStartLoadWithRequest(e,href)
        html='<p>your html</p>' 
        tagsStyles=  p:  textAlign: 'center', fontStyle: 'normal', color: 'black' 
        ,fontFamily:'Mukta-Regular',fontWeight:'100'  />
 </ScrollView>

【讨论】：

【参考方案3】：

这可以用来禁用滚动条-

对于水平滚动条 - showsHorizontalScrollIndicator=false

对于垂直滚动条 - showsVerticalScrollIndicator=false

【讨论】：

您只会隐藏滚动条。不是问题所问的。

以上是关于React Native Android WebView 如何禁用水平滚动？的主要内容，如果未能解决你的问题，请参考以下文章

使用 react-native run-android 运行时出现 React-Native 错误

react-native run-android上的React Native错误

解决 React-Native: Android project not found. Maybe run react-native android first?

React Native 项目 Android Gradle 失败（React-Native-Reanimated Fail）

react-native 使用react-native run-android 启动项目 报错 Android project not found

React Native Android入门实战及深入源码分析系列——React Native源码编译