在卡片中显示 webview（反应原生）答案

【问题标题】：display webview in card (react native)在卡片中显示 webview（反应原生）
【发布时间】：2018-10-02 03:58:30
【问题描述】：

当我使用 CRNA 创建我的 react 本机应用程序时，我将 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 来显示它。

请帮帮我....

提前谢谢你。

【问题讨论】：

您需要在 CardItem 样式中定义高度
非常感谢！！！！现在可以使用了！ T____T

标签： react-native webview expo

【解决方案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>
    );
  }
}

【讨论】：

【解决方案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 ...]

【讨论】：