postion视图首先出现在屏幕上，滚动视图之后反应为原生视图

Question

我正试图在react native tsx中制作一个自定义标头，为此我制作了一个函数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,
},
});

提前感谢！

在此处输入图像描述标题远高于状态bar.currentHeight

Answer 1

您的问题在于布局：

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

没有必要将标题"；绝对"；。将其移除，或将其设置为相对。也不要同时设置高度和弯曲度。看起来你不明白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,
},
});