1

我有<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滚动？

4

3 回答 3

2

我想你可以试着把你的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

于 2020-08-24T21:48:00.910 回答
1

只需在nestedScrollEnabled=truewebview 组件中添加道具

<ScrollView
    <WebView nestedScrollEnabled source={{uri:'https://www.website.com' }} />
 </ScrollView>
于 2022-03-01T10:32:57.763 回答
0

我被这个问题困住了。

问题定义

Webview在里面ScrollView并且Webview高度大于ScrollView这就是为什么ScrollView窃取scroll事件并且我无法滚动浏览网页的原因。

解决方案

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

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

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

于 2021-12-03T00:08:01.140 回答