import React, {useState} from 'react';
import {Linking, Dimensions, View, Text, ActivityIndicator, Platform} from 'react-native';
import AutoHeightWebView from 'react-native-autoheight-webview';
import {getRealDP as dp, DEVICE_WIDTH, DEVICE_HEIGHT} from "../utils/Common";
const onShouldStartLoadWithRequest = (result, props) => {
console.log(result, props);
// props.navigation.push('SpacialScript',props)
return true;
};
const onError = ({nativeEvent}) =>
console.error('WebView error: ', nativeEvent);
const onMessage = (event, props) => {
const {data} = event.nativeEvent;
console.log('messageData====>>>', data, props)
let messageData;
try {
messageData = JSON.parse(data);
} catch (e) {
console.log(e.message);
}
if (typeof messageData === 'object') {
const {url, video} = messageData;
// check if this message concerns us
if (url && url.startsWith('http')) {
Linking.openURL(url).catch(error =>
console.error('An error occurred', error),
);
}
if (video) {
// console.log('video====>>>',video)
// let url = 'http://sp1.nineddc.com:8866/api/alien/download/28481223-5320-4f78-6704-1fbb3ca66836/lidongyang2.mp4'
props.playVideo(video)
}
}
};
const onHeightLoadStart = (props, item) => {
item.webView.postMessage(props.webFontSize)
};
const onHeightLoad = () => console.log('',);
const onHeightLoadEnd = () => console.log('',);
const customCss = '* { -webkit-user-select: none; } input, textarea { -webkit-user-select: initial; } body { user-select: none !important; overflow-x: hidden !important; }';
const customJs = `
(function() {
setTimeout(function() {
try {
var s = document.createElement('style');
s.innerHTML = '${customCss.replace(/'/g, "\\'").replace(/(\r\n|\n|\r)/gm, '')}';
document.head.appendChild(s);
} catch (e) { }
}, 0);
})();`;
const _injectJavaScript = () => `
var ps=document.getElementsByTagName('p');
let size = 10;
for(var i=0;i<ps.length;i++){
ps[i].style.fontSize=size+10.5+'pt';
// ps[i].style.lineHeight=(size*1.5+18)+'pt';
}
var ss=document.getElementsByTagName('span');
for(var i=0;i<ss.length;i++){
ss[i].style.fontSize=size+10.5+'pt';
// ss[i].style.lineHeight=(size*1.5+18)+'pt';
}
`
const Explorer = (props) => {
const [setHeightSize] = useState({height: 0, width: 0});
// let data = props.data
console.log('props=====>>>>>', props.data)
let data = [
{url:'https://imgurl.ninedvr.com/laitan/book/2022/10/27/7f32a8bd-3477-41ae-8436-91ffc87a7542.html'},
{url:'https://imgurl.ninedvr.com/laitan/book/2022/10/27/14e67b97-c705-43c1-b960-f1abf0e8990f.html'},
{url:'https://imgurl.ninedvr.com/laitan/book/2022/10/27/9df2bce8-96cf-4053-b373-a9f7994d78cc.html'},
]
return (
data.map((item, id) => {
item.webView && item.webView.postMessage(props.webFontSize);
return (
<AutoHeightWebView
key={id}
ref={ref => item.webView = ref}
customStyle={null}
originWhitelist={["*"]}
onError={onError}
// onLoad={onHeightLoad}
onLoadStart={() => onHeightLoadStart(props, item)}
// onLoadEnd={onHeightLoadEnd}
startInLoadingState={true}
scalesPageToFit={false}
scrollEnabledWithZoomedin={false}
viewportContent={'width=device-width, user-scalable=no'}
mixedContentMode={'always'}
onShouldStartLoadWithRequest={(e) => onShouldStartLoadWithRequest(e, props)}
customScript={
`document.body.style.width = ${Dimensions.get('window').width};
let background = document.getElementById('content-txt');
// background.style.backgroundColor = '#fff';
background.style.backgroundColor = 'transparent';
document.body.style.userSelect = 'none';
${customJs}
`
}
// injectedJavaScript={_injectJavaScript()}
// injectedJavaScriptBeforeContentLoaded={Platform.OS === 'ios' ? customJs : undefined}
// injectedJavaScript={Platform.OS === 'android' ? customJs : undefined}
onSizeUpdated={(size) => {
setHeightSize
if (size.height !== 0 && id >= 1) {
data[id].height = data[id - 1].height + size.height
data[id].width = size.width
} else {
data[id].height = size.height
data[id].width = size.width
}
if (id === data.length - 1 && size.height !== 0) {
// props.getHeight(data)
}
}}
source={{uri: item.url,}}
onMessage={event => onMessage(event, props)}
renderLoading={() => {
return (
<View style={{
height: dp(200),
backgroundColor: 'rgba(0,0,0,.5)',
justifyContent: 'center',
alignItems: 'center'
}}>
<Text style={{color: '#fff'}}>Loading... </Text>
<ActivityIndicator size="small" color="#ccc" animating={true}/>
</View>
)
}}
/>
)
})
);
};
export default Explorer;
<ScrollView
ref={scrollView => this.scrollView = scrollView}
// onScroll={(e) => this.onScroll(e, html_list)}
onScrollBeginDrag={() => {
this.setState({isTabLocation: false})
}}
>
<MyWebViewList
webFontSize={`${webFontSize ? webFontSize : 0}`}
data={html_list}
playVideo={(e) => this.onPlayVideo(e)}/>
</ScrollView>
scroll to top or scroll to end will be force exit App without red error or native error
Bug description:
when scroll to top or scroll to end is crash without any error tips , Android OS < 12 is normal
To Reproduce:
Android OS Version : 12
react-native : '0.63.3'
react-native-webview: '11.23.0'
eact-native-autoheight-webview:'1.6.4'
Source (static HTML or url):
Example my code:
use template
Expected behavior:
scroll to top or scroll to end will be force exit App without red error or native error
Screenshots/Videos:
Environment: