RN中ScrollView和WebView嵌套时在Android上滚动冲突问题如何解决



  • 需求:
    scrollView中嵌套两个View 一个webView 一个普通View
    webView在上,View在下
    问题:
    在Android上 只有webView可以滚动 外层的scrollView不可以滚动
    如何解决



  • 滚动冲突啊,即使在原生代码里面,也是要额外处理的



  • @long 说:

    也是要额外处理的

    是的 但是这里要怎么处理呢?



  • @long 或者如何获取到webView中内容的高度



  • 我这里的做法是,在webview里使用js计算页面高度,然后通过合适的方式传递给外部,外部收到这个高度以后,调整布局,这样webview就可以没有滚动条,最终实现外层ScrollView滚动。



  • @tdzl2003 也就是说在网页里是可以获取到整体的高度的?



  • @zcgong 在webview里的js是可以获取高度的,只不过随着加载过程还可能会不断变化。我这里的代码类似这样:

     'var l;function p(){var sz=d.body.clientHeight;if (sz!==l){l=sz;window.open("#"+l, "_self");}};p();setInterval(p, 1000);'
    

    注意这段代码是写在html里的script标签里的,而不是写在RN的代码里。

    我这里是把高度作为地址栏的hash来获取的,所以可以这样拿到:

    onNavigationStateChange = ({title, url})=>{
        console.log('Url:', url);
        const m = /\#(\d+)$/.exec(url);  //从地址栏中匹配出hash部分
        if (m && m[1]){
          this.setState({height: (m[1] | 0) + 24});
        }
      };
    
    <WebView onNavigationStateChange={this.onNavigationStateChange} {...props}/>
    

    不过注意使用hash的方法有可能和已有html对hash的使用冲突,如果这样,你还是需要类似react-native-webview-bridge模块来在两个javascript之间通信。



  • @tdzl2003 说:thanks


登录后回复