将 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 }}>

官方文档明确说：

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