react native 使webview里面的页面自动滚动

最新推荐文章于 2024-06-19 11:22:28 发布

Wooyulin

最新推荐文章于 2024-06-19 11:22:28 发布

阅读量3.6k

点赞数

分类专栏： RN

本文链接：https://blog.csdn.net/Wooyulin/article/details/60875267

版权

RN 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

主要是使用到InjectJavaScript注入js代码使得页面滚动

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    WebView,
    Dimensions,
    TouchableHighlight
} from 'react-native';

const {width, height} = Dimensions.get('window');
class Find extends Component {
    constructor(props){
        super(props);
        this.state={
            uri1 : 'http://www.lcode.org'
        }
    }
    render() {
        return (
            <View style={styles.container}>
                <WebView style={styles.webview_style}
                    source={{uri:this.state.uri1}}
                         javaScriptEnabled={true}
                         domStorageEnabled={true}
                         scalesPageToFit={true}
                         startInLoadingState={true}
                         injectedJavaScript ={HTML}
                    >
                </WebView>

            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',

    },
    webview_style:{
        flex:1,
        width:width,
        height:height-20,
        backgroundColor:'gray'
    }
});

const HTML = `
    var currentPosition=0,timer;
    timer = setInterval(function(){
         currentPosition+=2;

       if(currentPosition < document.body.scrollHeight)
       {
           window.scrollTo(0,currentPosition);
           console.log(currentPosition);

       }
       else
       {
           window.scrollTo(0,document.body.scrollHeight);
           currentPosition = 0;
           window.scrollTo(0,currentPosition);
           console.log('bottomalread');

       }
   },1)
    `;

module.exports = Find;

页面：

<html>
<head>
<script type="text/javascript">

</script>
<style type="text/css">
</style>
</head>
<body>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">饭</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">吃</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">家</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">回</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">你</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">带</div>
</body>
</html>