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

Question

我将<WebView>其嵌入到<Card.Content>我正在使用的a 中react-native-paper。我正在尝试可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滚动？

Answer 1

nestedScrollEnabled=true只需在 webview 组件中添加props

<ScrollView
    <WebView nestedScrollEnabled source={{uri:'https://www.website.com' }} />
 </ScrollView>

Answer 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