在卡片中显示 webview（本机反应）

Question

我正在使用 expo 作为模拟器，因为我使用 CRNA 创建了我的 React 本机应用程序。我想在 Card 元素内的 WebView 上显示一个 youtube 视频，但它不能像我想象的那样。

这是我的代码：

import React, { Component } from 'react';
import { WebView } from 'react-native';
import { Card, CardItem } from 'native-base';

export default class MyWeb extends Component {
  render() {
    return (
      <Card>
      <CardItem>
        <WebView
          source={{uri: 'https://www.youtube.com/embed/OCMs-YhSp2o'}}
          style={{marginTop: 20}}
      /></CardItem>
      </Card>
    );
  }
}

我不知道是不是卡片的原因，因为当我移除卡片并只显示 WebView 时，它起作用了。但是因为我想把视频和其他项目（文字，图片等）放在一起，所以我需要使用Card来显示它。

请帮帮我....

提前致谢。

Answer 1

当我定义 CardItem 的高度时，代码现在运行良好。感谢尼玛点评！

import React, { Component } from 'react';
import { WebView } from 'react-native';
import { Card, CardItem } from 'native-base';

export default class MyWeb extends Component {
  render() {
    return (
      <Card>
      <CardItem style={{height:200}}>
        <WebView
          source={{uri: 'https://www.youtube.com/embed/OCMs-YhSp2o'}}
          style={{marginTop: 20}}
      /></CardItem>
      </Card>
    );
  }
}

Answer 2

WebView 已从 React Native 中移除。现在可以从 'react-native-webview' 而不是 'react-native'

安装和导入

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
import { Card, CardItem } from 'native-base';

export default class App extends Component {
  render() {
    return (
      <Card>
      <CardItem style={{height:200}}>
        <WebView
          source={{uri: 'https://www.youtube.com/embed/OCMs-YhSp2o'}}
          style={{marginTop: 20}}
      /></CardItem>
      </Card>
    );
  }
}

如果您使用的是 Expo，您将面临这个问题

您项目的某些依赖项与当前安装的 expo 包版本不兼容：

react-native-webview - 预期版本范围：10.7.0 - 实际安装版本：^11.0.2 在安装正确版本的包之前，您的项目可能无法正常工作。要安装这些软件包的正确版本，请运行：expo install [package-name ...]

在卡片中显示 webview（本机反应）

display webview in card (react native)

webview

react-native

expo