javascript - 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 设备。你需要有这样的东西来避免这个问题:

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

const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS == "android" ? StatusBar.currentHeight : 0,
  },
});

 <SafeAreaView style={styles.container}>
   
</SafeAreaView>

对于 OrderItem不占用所有可用宽度，从 Animated.FlatList 中删除这个:

contentContainerStyle={{alignItems: 'center'}}