主要是使用到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>实现的就是让页面循环滚动
