React Native，内容在导航标题下，SafeAreaView 不起作用

Question

正如您在下图中看到的，我必须给出一些上边距，以便“不”隐藏导航标题下的一半内容，标题不应该是以下内容的“安全区域”，为了安全起见，我提供了SafeAreaView但我的内容仍然位于标题下，不幸的是我必须提供一些硬编码的边距顶部值以避免隐藏。

上图是我评论的时候的marginTop。

上图是我添加时的图片marginTop: 70

代码：

NotificationScreen.tsx:

import {
  View,
  SafeAreaView,
  Text,
  StatusBar,
} from 'react-native';
import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
import OrderItem from '../../components/OrderItem';

const NotificationScreen = () => {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    // calling API...
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar backgroundColor="transparent" translucent />

      <Text style={{color: 'lightgray', fontSize: 18}}>My Orders: </Text>

      <Animated.FlatList
        data={orders}
        entering={FadeIn}
        leaving={FadeOut}
        contentContainerStyle={{
          alignItems: 'center',
        }}
        keyExtractor={(_: any, index) => 'key' + index}
        renderItem={({item}) => <OrderItem key={item.id} data={item} />}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 70, // if I remove this, the content goes under the header as shown in image.
    flex: 1,
    padding: 10,
    backgroundColor: COLORS.primary,
  },
});

export default NotificationScreen;

还有一个问题，为什么我OrderItem不采用全宽度FlatList（参见图片，灰色框未采用全宽度...），我已向width: 100%我的OrderItem容器提供了：

OrderItem.tsx:

const OrderItem = ({data}) => {
  return (
    <View style={styles.container}>
      <View style={styles.textBlock}>
        <Text style={styles.label}>Strategy: </Text>
        <Text style={styles.info}>{data.strategyTitle}</Text>
      </View>
      // ... same views as shown in image
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    paddingVertical: 10,
    paddingHorizontal: 10,
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: COLORS.lightGray,
    borderRadius: 10,
  },
  textBlock: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  label: {
    color: 'grey',
    fontSize: 16,
  },
  info: {
    color: 'white',
    fontSize: 16,
  },
});

export default OrderItem;

Answer 1

目前不适SafeAreaView用于 Android 设备。您需要设置动态paddingTop以避免此问题：

import { Platform, StatusBar } from "react-native";

<SafeAreaView
  style={{
    paddingTop: Platform.OS == "android" ? StatusBar.currentHeight : 0,
  }}
>
  {/* Your screen elements go here */}
</SafeAreaView>

对于OrderItem不占用所有可用宽度的情况，请从中删除Animated.FlatList：

contentContainerStyle={{alignItems: 'center'}}