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

Question

我们如何使用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

但是它呈现白色页面。

谢谢

Answer 1

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

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

官方documentation明确指出：

  

仅当组件的父级尺寸大于0时，组件才能扩展以填充可用空间。如果父级的宽度和高度或flex均不固定，则父级的尺寸为0，而flex子级的尺寸不为0。可见。