javascript - React Native iframe - Stack Overflow

admin管理员组

文章数量:1305656

Hello I am working on an app for a school project using React Native and have been having trouble getting iframes to work. The code that I have been working on is below.

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}>
    Wele the video tutorial page!
  </Text>
  <Button
    onPress={() => navigate('Home')}
    title="Go to Home"
   />
</View>
<Iframe url=""
    width="450px"
    height="450px"
    id="myId"
    className="myClassname"
    display="initial"
    position="relative"
    allowFullScreen/>
  </View>  
  );
}

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

When I pile this on my virtual device it builds, however when I attempt to access the VideoPage I get the following error:

Invariant Violation: View config not found for name iframe

If anyone could take a look and let me know what I am doing wrong I would greatly appreciate it. Please let me know if you need more information.

Hello I am working on an app for a school project using React Native and have been having trouble getting iframes to work. The code that I have been working on is below.

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}>
    Wele the video tutorial page!
  </Text>
  <Button
    onPress={() => navigate('Home')}
    title="Go to Home"
   />
</View>
<Iframe url="http://www.youtube./embed/xDMP3i36naA"
    width="450px"
    height="450px"
    id="myId"
    className="myClassname"
    display="initial"
    position="relative"
    allowFullScreen/>
  </View>  
  );
}

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

When I pile this on my virtual device it builds, however when I attempt to access the VideoPage I get the following error:

Invariant Violation: View config not found for name iframe

If anyone could take a look and let me know what I am doing wrong I would greatly appreciate it. Please let me know if you need more information.

• javascript
• react-native
• iframe

Share Improve this question Follow asked Mar 21, 2018 at 23:58 Andrew ArmstrongAndrew Armstrong 5111 gold badge11 silver badge22 bronze badges 1

• what will happen if you move Iframe out of your main View? – Chris Chen Commented Mar 22, 2018 at 0:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

react-iframe is not an react native ponent.

You should use WebView instead.

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

本文标签： javascriptReact Native iframeStack Overflow