使用 react native 控制顶栏

Question

我是反应原生的新手，我正在尝试做一个简单的应用程序。

我只是放了一条文字，这就是 Nexus 5 的结果：

我知道将 SaveAreaView 这将是固定的，但它不会。

 return (
    <SafeAreaView style={{flex: 1}}>
       <Text style={styles.principalTitle}>Just a text</Text>
    </SafeAreaView>
 );

如何控制文本在可见区域中出现的顶部栏？ 谢谢你。

Answer 1

SafeAreaView 的目的是在设备的安全区域边界内呈现内容。 目前仅适用于 iOS 版本 11 或更高版本的 iOS 设备。 -安全区域视图

在您的情况下， SafeAreaView 无效，但您可以将marginTop传递给视图或直接传递给您的文本。 例如：

 return (
    <SafeAreaView style={{flex: 1, marginTop: 20 }}>
       <Text style={styles.principalTitle}>Just a text</Text>
    </SafeAreaView>
 );

Answer 2

按照蒂姆参考答案，我改进了他的代码。

使用 React Native 你可以控制状态栏的高度：

import {...  , StatusBar} from 'react-native';

return (
   <SafeAreaView style={{flex: 1, paddingTop: StatusBar.currentHeight }}>
      <Text style={styles.principalTitle}>Just a text</Text>
   </SafeAreaView>
);

我更喜欢填充以保存背景。

谢谢！