javascript React Native,内容在导航头下,SafeAreaView不工作

ig9co6j1  于 2023-04-10  发布在  Java
关注(0)|答案(1)|浏览(139)

正如你在下面的图片中看到的,我必须给予一些顶部边距,以“不”隐藏我的导航标题下的一半内容,是不是标题应该是一个“安全区”下面的内容,为了安全起见,我提供了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;
wwwo4jvm

wwwo4jvm1#

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'}}

相关问题