打开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

崩溃日志截图发下,我帮你看看,或者对照这块课程源码检查下你的代码实现看是否有出入的地方呢

0
3
CrazyCodeBoy
嗯,好的。
2022-03-02
共3条回复

RN入门到进阶,打造高质量上线App

解锁React Native开发应用新姿势,React Native新版本热门技术

3144 学习 · 3241 问题

查看课程