在平面列表内容上反应本机导航 header

Question

第一

第二

正如您在图像中看到的（第一个 - 在应用填充之前，第二个 - 在应用填充之后），header 是我的 flatlist 内容的 covering/on 顶部，但是如果我给 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,
  },
});

Package.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",

Answer 1

除了使用 SafeAreaView，您还可以使用 useSafeAreaInsets 挂钩，这将为您提供添加到视图 top/bottom 的填充量以避免这些元素。您还可以使用 useHeaderHeight 挂钩仅获取 header.

的高度

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

在平面列表内容上反应本机导航 header

React Native Navigation header over flatlist content

react-native

react-navigation

react-native-navigation