Question

我正在尝试在水平滚动ScrollView中使用react-native-webview。

在IOS上，它工作正常，但是在Android上，如果用户没有以完美的垂直方式滚动，则scrollView开始窃取所有事件，从而完全阻止了webView中的滚动。

再次，在IOS上运行正常

代码看起来像这样

<ScrollView
  ref={(c) => {this.scroll = c}}
  onMomentumScrollEnd={this.handleScroll}
  horizontal
  pagingEnabled
  showsHorizontalScrollIndicator={false}
  decelerationRate={0.0}
  directionalLockEnabled
  nestedScrollEnabled
>

   <WebView
     style={ webviewStyle }
     source={{ uri: 'http://www.google.com' }}
     startInLoadingState
   />
   <WebView
     style={ webviewStyle }
     source={{ uri: 'http://www.google.com' }}
     startInLoadingState
   />

</ScrollView>

Answer 1

这是webview上的持续性问题，尚未更新。您可以考虑使用其他Webview库，例如Webview Library 希望有帮助。

Answer 2

您可以尝试

<ScrollView contentContainerStyle={{
    flex: 1 
}}>

Answer 3

在android中，当父视图和子视图都可以滚动时。它将发生滚动冲突。您必须使用nestedScrollEnabled并将其设置为true才能使子级滚动。官方文件说：

为Android API级别21+启用嵌套滚动。默认情况下，iOS上支持嵌套滚动。

同时，还必须设置子视图和父视图的高度。

Answer 4

我最终使用的技巧多于修复，它可以从webView中检测滑动事件并暂时阻止scrollView上的滑动，从而允许在页面上进行“正常”滚动

看起来有点像

 async pauseSwipe() {

    if (!this.state.swipeDisabled) {
      this.setState({ swipeDisabled: true }, () => {
        setTimeout(() => {
          this.setState({
            swipeDisabled: false,
          })
          }, 1000)
      })
    }
  }

<WebView
  injectedJavaScript="window.addEventListener('scroll', function(event) {window.ReactNativeWebView.postMessage(JSON.stringify(event));});true;"
  onMessage={event => {
    if (event.nativeEvent.data) {
      this.pauseSwipe()
    }
  }}
/>

，并在scrollView中

scrollEnabled={!this.state.swipeDisabled}

在ScrollView中，Android上的可滚动子项不可滚动

4 个答案: