在平面串列內容上反應本機導航標題-有解無憂

第一

在平面串列內容上反應本機導航標題

第二

在平面串列內容上反應本機導航標題

正如您在影像中看到的（第一個 - 應用填充之前，第二個 - 應用填充之后），標題覆寫/在我的平面串列內容之上，但如果我給 paddingTop: 80 （一個常數值），它看起來很好（明顯地）。這里可能是什么問題？我很困惑！

const StrategyInfo = ({navigation}) => {
  const {strategyTitle} = useRoute().params;
  useLayoutEffect(() => {
    navigation.setOptions({ headerTitle: strategyTitle });
  }, [navigation, strategyTitle]);

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar backgroundColor="transparent" />
      <Animated.FlatList
        data={stocks}
        ListHeaderComponent={() => (
          <View style={styles.listHeader}>
            <Text>All stocks</Text>
          </View>
        )}
        contentContainerStyle={{marginHorizontal: 10}}
        keyExtractor={(_: any, index) => 'key'   index}
        renderItem={({item}) => (
          <View>
            <Text style={{color: 'white'}}>{item.name}</Text>
            <Text style={{color: 'white'}}>{item.exchange}</Text>
          </View>
        )}
      />
    </SafeAreaView>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.primary,
  },
  listHeader: {
    flex: 1,
    width: '100%',
    alignItems: 'flex-start',
    backgroundColor: COLORS.primary,
    marginBottom: 12,
  },
});

包.json：

"react-native-safe-area-context": "3.3.2",
"firebase": "^9.6.6",
"react": "17.0.2",
"react-dom": "17.0.1",
"react-native": "0.67.2",
"react-native-get-random-values": "^1.7.2",
"react-native-pager-view": "5.4.9",
"@react-navigation/bottom-tabs": "^6.2.0",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",

uj5u.com熱心網友回復：

您可以使用useSafeAreaInsets鉤子而不是使用 SafeAreaView，這將為您提供添加到視圖頂部/底部的填充量，以避免這些元素。您也可以使用useHeaderHeight鉤子僅獲取標題的高度。

https://reactnavigation.org/docs/handling-safe-area/觸及 useSafeAreaInsets https://reactnavigation.org/docs/elements/#useheaderheight

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/469539.html

標籤：反应式反应导航反应原生导航

上一篇：如何在laravel中使用foreach獲取陣列值

下一篇：在React中過濾本地呈現的JSON表