react-native - 将 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明确地说:

A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.