如何在 react-native-webview 中使 WebView 可滚动？答案

【问题标题】：How to make WebView scrollable in react-native-webview?如何在 react-native-webview 中使 WebView 可滚动？
【发布时间】：2020-12-13 13:30:16
【问题描述】：

我有 <WebView> 嵌入在 <Card.Content> 中，因为我正在使用 react-native-paper。我试图让WebView 可滚动。 webview 显示但不可滚动。

我正在使用的代码：

  <Card theme={{ roundness: 20 }} style={{ margin: 10, height: height*0.8 }} elevation={14}>
     <Card.Content style={{ flex: 1 }}>
        <View style={{ justifyContent: "center", alignItems: "center" }}>
              <WebView
              style={{ width: width * 0.8, height: height * 0.9 }}
              allowsBackForwardNavigationGestures={false}
              source={{ uri: "https://paypal.com"}}
              pullToRefreshEnabled={false}
              javaScriptEnabled
              startInLoadingState
              decelerationRate="normal"
              scalesPageToFit={Platform.OS == "android"?  false : true}
              originWhitelist={['*']}
              domStorageEnabled={true}
              scrollEnabled
              renderError={e => { console.log(e); }}
              />
        </View>
     </Card.Content>
  </Card>

如何使WebView 可滚动？

【问题讨论】：

标签： android ios react-native react-native-webview react-native-paper

【解决方案1】：

我想您可以尝试将您的 WebView 包装在 ScrollView 中，如下所示：

export default class App extends Component {
  render() {
    return (
      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
        <WebView
          source={{
            uri:
              'https://github.com/react-native-community/react-native-webview/issues/22'
          }}
          style={{ height: 100 }}
        />

        <WebView
          source={{ uri: 'https://bbc.co.uk/news' }}
          style={{ height: 100 }}
        />
      </ScrollView>
    );
  }
}

另外，您可以使用react-native-autoheight-webview

【讨论】：

你能解释一下为什么你在滚动视图中使用两个网页视图吗？我没明白。
我试过你的方法，但没有奏效。我会试试你提到的图书馆。
我添加了两个 webview 只是为了测试！
我找到了问题谢谢你的帮助，问题是我在 <Card> 视图上使用了边距。我删除了边距，现在可以滚动了。不知道为什么 margin 会影响 <WebView> 滚动。
如果您的问题已得到解答，请务必接受并投票以供进一步参考。

【解决方案2】：

我被这个问题困住了。

问题定义

Webview 在ScrollView 内部，而Webview 的高度大于ScrollView，这就是ScrollView 窃取scroll 事件而我无法滚动浏览网页的原因。

解决方案

使Webview 适合Scrollview 的高度。为此，我们需要在contentContainerStyle 中使用flexGrow

简单示例

   return (
    <SafeAreaView style={{flex: 1}}>
      <ScrollView
        style={{ width: '100%' }}
        contentContainerStyle={{ flexGrow: 1 }}
      >
        <WebView source={{ uri: contentUrl }} originWhitelist={['*']} />
      </ScrollView>
    </SafeAreaView>
  );

{flex: 1} 和 { width: '100%' } 很重要，否则内容将不可见。

【讨论】：