javascript - 用 native react 控制顶部栏

Question

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

我只是输入了一个文本，这是 Nexus 5 中的结果:

我知道放置 SaveAreaView 可以解决这个问题，但事实并非如此。

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

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

Answer 1

The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later. - SafeAreaView

在您的情况下，SafeAreaView 没有任何效果，但您可以将 marginTop 传递给 View 或直接传递给您的文本。例如。 :

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