位置视图首先在屏幕上，滚动视图后反应原生

Question

我正在尝试在 react native tsx 中制作一个自定义 header ，为此我制作了一个 function renderHeader ，我在滚动视图之前调用它，因为我不希望它是可滚动的......

但它不起作用

请帮我

和代码：

import { ScrollView, StyleSheet, Text, View, StatusBar } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
    const heightBar=StatusBar.currentHeight;
    const renderHeader = () => {
        return (
            <View style={styles.headerContainer}>
               <Text>hey</Text> 
            </View>
        );
    };
  return (
    <SafeAreaView style={styles.container}>
        {renderHeader()}
        <ScrollView style={styles.ScrollView}>
            <Text>buna</Text>
        </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  headerContainer: {
    position: 'absolute',
    flex:1,
    paddingTop: StatusBar.currentHeight,
    backgroundColor: 'pink',
    height: 10,
    borderBottomColor: 'black',
  },  
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  ScrollView: {
    flex: 1,
    marginHorizontal: 20,
  },
});

提前致谢 ！

在此处输入图像描述header 比 statusbar.currentHeight 高

Answer 1

您的问题在于布局：

headerContainer: {
    position: 'absolute',
    flex:1,
    paddingTop: StatusBar.currentHeight,
    backgroundColor: 'pink',
    height: 10,
    borderBottomColor: 'black',
  },  

无需将 header 定位为“绝对”。 删除它，或将其设置为相对。 也不要同时设置高度和弯曲。 看来你不明白 flex 是做什么的。 如果是这样，请做你的研究，这是非常重要的。

我认为您想要实现的最小示例：

import { ScrollView, StyleSheet, Text, View, StatusBar, SafeAreaView } from 'react-native';

export default function App() {
    const renderHeader = () => {
        return (
            <View style={styles.headerContainer}>
            <Text>hey</Text> 

            </View>
        );
    };
  return (
    <SafeAreaView style={styles.container}>
        {renderHeader()}
        <ScrollView style={styles.ScrollView}>
            <Text>buna</Text>
       </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  headerContainer: {
    backgroundColor: 'pink',
    borderBottomColor: 'black',
  },  
  container: {
    flex: 1,
    backgroundColor: 'blue',
  },
  ScrollView: {
    flex: 1,
    marginHorizontal: 20,
  },
});