Question

我尝试使用Expo-Webview通过<object>显示HTML5内容（.html），但是它不起作用。

相同的html5内容可以在常规网页中完美运行。

有人可以举一个简单的例子来实现上述场景吗？

这是代码，

我尝试了react-native-render-html和webview，但没有任何效果。

import React, { Component } from 'react';
import { withNavigation } from '@react-navigation/compat';
import { StyleSheet, Dimensions, Image, TouchableWithoutFeedback,ScrollView } from 'react-native';
import { Block, Text, theme } from 'galio-framework';
import HTML from 'react-native-render-html';

import Constants from 'expo-constants';
import materialTheme from '../constants/Theme';
import { heightPercentageToDP } from 'react-native-responsive-screen';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';

import {WebView} from 'react-native-webview';
import { Video } from 'expo-av';

class CourseDetail extends React.Component {
  render() {
    const imageStyles = [styles.image,  styles.normalImage];
     const {navigation,route}= this.props;
  const Course = route.params.course;
  const imageUrl = route.params.imageUrl;
  const videoUrl  = route.params.videoUrl;
    return (
      <ScrollView 
      showsVerticalScrollIndicator={false}
      contentContainerStyle={styles.catalogItems}>
      <Block  flex style={[styles.article]}>
      <Text size={30} style={styles.CourseTitle}>{Course.Title}</Text>  

 <HTML containerStyle={styles.courseWrap } html={ '<object  type="text/html" data="https://domainname.com/story_html5.html"  ></object>'}  /> 

    <WebView source={{ uri: 'https://domainname.com/story_html5.html' }} /> 


   </Block>
      </ScrollView>
    );
  }
}

export default withNavigation(CourseDetail);

const styles = StyleSheet.create({
  article:{
    backgroundColor: theme.COLORS.WHITE,
    padding:hp('3%')
  },
  content: {

    flex:1,
  },
  CourseTitle:{
    flex: 1,
    flexWrap: 'wrap',
    paddingBottom: 10,
    paddingTop:5,
    fontFamily:'manifa-regular',
    color:'#333333',
  },
  imageContainer: {
    elevation: 1,
  },
  shadow: {
    shadowColor: 'rgba(0,51,160,0.15)',
    shadowOffset: { width: 0, height: 5 },
    shadowRadius:15,
    shadowOpacity: 1,
    elevation:15,

  },
  image: {
    borderRadius: 3,
    marginHorizontal: wp('1%'),
    marginTop:   hp('5%'),    
    backgroundColor:'#84BD00',
  },
  normalImage: {
    height:hp('25%'),
    width:'auto',  
  //  / marginTop:hp('3.3%'),
    marginHorizontal: 0,
    marginRight: wp('0%'),
    marginLeft:wp('0%'),
    marginTop:hp('3 %'),
    marginBottom:hp('1%'),
    flex: 1,
    flexDirection: 'row',
    padding:0
  },
  courseWrap:
  { 
    marginVertical:10,
    width:'100%',
    height:hp('50%'),
    backgroundColor:'red'
  },
  description:
  {
    marginTop:10
  }

});

博览会-反应本机-Webview-html5-对象标签-问题

0 个答案: