react-native - 在卡片中显示 webview( react native )

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>
    );
  }
}

我不知道这是否是因为卡的原因，因为当我删除卡并只显示 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>
    );
  }
}