时间戳

首页 > 解决方案 > 将 SafeAreaView 与 react-native-webview 一起使用

react-native - 将 SafeAreaView 与 react-native-webview 一起使用

问题描述

我们如何使用SafeAreaView才能显示一个WebView？我试过这样：

import React from 'react';
import {SafeAreaView, StatusBar} from 'react-native';
import {WebView} from 'react-native-webview';

class ChaineYT extends React.Component {

  render() {
    return (
      <SafeAreaView>
        <WebView
          source={{uri: "someURL"}}
        />
      </SafeAreaView>
    )
  }
}

export default ChaineYT

但它正在呈现一个白页。

谢谢

标签： react-native

解决方案

您没有指定 SafeAreaView 的高度和宽度。

更改<SafeAreaView>为<SafeAreaView style={{ flex:1 }}>

官方文档清楚地说：

如果父组件的尺寸大于 0，则组件只能扩展以填充可用空间。如果父组件没有固定的宽度和高度或 flex，则父组件的尺寸将为 0，并且 flex 子组件将不可见。

推荐阅读