React Native 安卓状态栏答案

【问题标题】：React Native android status barReact Native 安卓状态栏
【发布时间】：2022-02-01 18:02:20
【问题描述】：

我是 React Native 的新手，我正在尝试将我的文本放在 Android 设备的状态栏下方。在我的 ios 设备上，“Hello World！”完全在状态栏的正下方，但在 android 设备上，“Hello World！”就在状态栏里面。谁能帮我移动文本，使其位于状态栏下方。这是我的代码以及它目前在我的 android 设备上的样子。

import React from "react";
import { StatusBar } from "expo-status-bar";
import { StyleSheet,Text,SafeAreaView,Platform } from "react-native";

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.textColor}>Hello World!</Text>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "rgba(0, 0, 0, 0.7)",
    alignItems: "center",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
  },
  textColor: {
    color: "white",
  },
});

当前的安卓视图

【问题讨论】：

stackoverflow.com/questions/57765448/…

标签： android react-native

【解决方案1】：

SafeAreaView 不支持paddingTop 尝试将其应用于View

<SafeAreaView style={styles.container}>
  <View style={{ paddingTop: StatusBar.currentHeight }}>
    ...
  </View>
</SafeAreaView>

【讨论】：