Question

当我使用CRNA创建我的react native应用时，我正在使用expo作为模拟器。而且我想在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>
    );
  }
}

我不知道是否是由于Card引起的，因为当我取出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 ...]

在卡片中显示网页视图（反应为原生）

2 个答案: