在導航標題下反應原生SafeAreaView

正如你在下圖中看到的，我必須給一些上邊距以便“不”隱藏導航標題下的一半內容，標題不應該是下面內容的“安全區域”，為了安全起見，我提供了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;

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

我找到了一個解決方案，但我不確定它是否適用于所有螢屏尺寸，這里是：

我使用了@react-navigation/elements, ->提供的鉤子useHeaderHeight。

import {useHeaderHeight} from '@react-navigation/elements';

return ...

<SafeAreaView style={[styles.container, {paddingTop: headerHeight}]}>
      <StatusBar backgroundColor="transparent" translucent />

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: COLORS.primary,
  },
});

這是有效的，但仍然2nd query像問題中提到的那樣，OrderItem沒有占據我的平面串列的全部寬度......有人可以幫我嗎？謝謝！

標籤：javascript css 反应式

上一篇：如何將按鈕塊移動到正確的css

下一篇：如何使div容器拱起來？