Question

您好我正在使用React Native处理学校项目的应用程序，并且无法让iframe工作。我一直在处理的代码如下。

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  DeviceEventEmitter,
  StatusBar,
  DrawerNavigator,
  Button,
  WebView,
} from 'react-native';
import Iframe from 'react-iframe'

var s = require('./style');


const VideoPage = (props)  => {
const { navigate } = props.navigation;
return (
  <View>
<View style={s.container}>
  <StatusBar
    backgroundColor="black"
    barStyle="light-content"
  />

</View>
<View>
  <Text style={s.headText}>
    Welcome the video tutorial page!
  </Text>
  <Button
    onPress={() => navigate('Home')}
    title="Go to Home"
   />
</View>
<Iframe url="http://www.youtube.com/embed/xDMP3i36naA"
    width="450px"
    height="450px"
    id="myId"
    className="myClassname"
    display="initial"
    position="relative"
    allowFullScreen/>
  </View>  
  );
}

VideoPage.navigationOptions = {
  title: 'Video Tutorials',
};
export default VideoPage`

当我在我的虚拟设备上编译它时，但是当我尝试访问VideoPage时，我收到以下错误：

Invariant Violation: View config not found for name iframe

如果有人可以看看，让我知道我做错了什么，我将非常感激。如果您需要更多信息，请与我们联系。

Answer 1

react-iframe不是反应原生成分。

您应该使用WebView。

https://www.quora.com/How-do-I-integrate-iframes-in-React-Native-platform

React Native iframe

1 个答案: