打开webview奔溃
来源:8-7 H5混合开发详情模块(二)
weixin_慕的地1002069
2022-02-28
老师,打开webview一直奔溃,是写的哪里有问题吗
import {StyleSheet, Text, View} from 'react-native';
import React, {
memo,
PureComponent,
useEffect,
useRef,
useState,
VFC,
} from 'react';
import {WebView} from 'react-native-webview';
import NavigationBar from 'react-native-navbar-plus';
import {useSelector} from '../redux/hook';
import {ViewUtil} from '../util/ViewUtil';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import {TouchableOpacity} from 'react-native-gesture-handler';
import NavigationUtil from '../navigator/NavigationUtil';
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
const DetailPage: VFC = (props: any) => {
const {projectModel} = props.route.params;
const [title, setTitle] = useState(
projectModel.full_name || projectModel.fullName,
);
const [url, setUrl] = useState(
projectModel.html_url || `https://github.com${projectModel.fullName}`,
);
const [canGoBack, setCanGoBack] = useState(false); //是否返回原生页面
const WebViewRef = useRef<any>();
const theme = useSelector(state => state.ThemeSlice.theme);
useEffect(() => {
setUrl(
projectModel.html_url || `https://github.com${projectModel.fullName}`,
);
setTitle(projectModel.full_name || projectModel.fullName);
}, []);
const onBack = () => {
if (canGoBack && WebViewRef.current) {
WebViewRef.current.goBack();
} else {
NavigationUtil.goBack(props.navigation);
}
};
const renderRightButton = () => {
return (
<View style={{flexDirection: 'row'}}>
<TouchableOpacity onPress={() => {}}>
<FontAwesome
name={'star-o'}
size={20}
style={{color: 'white', marginRight: 10}}
/>
</TouchableOpacity>
{ViewUtil.getShareButton(() => {
console.log('getShareButton');
})}
</View>
);
};
let navigationBar = (
<NavigationBar
leftButton={ViewUtil.getLeftBackButton(() => onBack())} //左侧返回按钮
rightButton={renderRightButton()}
title={title}
style={{backgroundColor: theme}}
/>
);
const onNavigationStateChange = (navState: any) => {
setCanGoBack(navState.canGoBack);
setUrl(navState.url);
};
return (
<View>
{navigationBar}
<WebView
ref={webview => (WebViewRef.current = webview)}
startInLoadingState={true}
onNavigationStateChange={(e: any) => onNavigationStateChange(e)}
source={{uri: url}}
/>
</View>
);
};
export default memo(DetailPage);
写回答
1回答
-
CrazyCodeBoy
2022-03-01
崩溃日志截图发下,我帮你看看,或者对照这块课程源码检查下你的代码实现看是否有出入的地方呢
032022-03-02
相似问题