我有以下 App.tsx 代码快照,
const Stack = createNativeStackNavigator();
const MainStackNavigator = () => (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
);
const App: React.FC = () => {
return (
<SafeAreaProvider>
<Contexts>
<NavigationContainer>
<ScrollView contentContainerStyle={styles.scrollViewContent}>
<Header />
<View style={styles.content}>
<MainStackNavigator />
</View>
<Footer />
</ScrollView>
</NavigationContainer>
</Contexts>
</SafeAreaProvider>
);
};
const styles = StyleSheet.create({
scrollViewContent: {
flexGrow: 1,
// justifyContent: 'flex-start',
},
content: {
flex: 1,
},
});
我有 Header.tsx
const Header: React.FC = () => {
return (
<View style={styles.header}>
<Pressable onPress={() => navigation.navigate('Home')}>
<Image source={logo} style={styles.logo} />
</Pressable>
{citiesList.length > 0 ? (
<CitySelection />
) : (
<ActivityIndicator style={styles.spinner} />
)}
</View>
);
}
const styles = StyleSheet.create({
header: {
backgroundColor: 'black',
paddingVertical: 10,
paddingHorizontal: '5%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
logo: {
height: 50,
width: 100,
resizeMode: 'contain',
},
cityDropdown: {
flexDirection: 'row',
alignItems: 'center',
},
cityText: {
color: 'white',
marginLeft: 10,
},
spinner: {
marginLeft: 10,
},
navButton: {
height: '100%',
justifyContent: 'center',
marginHorizontal: 10,
},
navButtonIcon: {
height: '100%',
paddingHorizontal: 10,
justifyContent: 'center',
},
navLinks: {
flexDirection: 'row',
alignItems: 'center',
height: '100%',
},
navText: {
color: 'white',
fontSize: 16,
},
icon: {
marginHorizontal: 15,
fontWeight: '100',
},
nameText: {
fontStyle: 'italic',
fontWeight: 'bold',
},
});
我的标题不随内容滚动。当我滚动网页时,它卡在浏览器顶部隐藏内容。我在这里缺少什么?
我尝试了不同的弹性设置, justifyContent: 'flex-start' 等,但即使这样也不起作用。我已将 Header 组件放入滚动视图中。
1。使用 flex 进行内容包装: 确保 ScrollView 内容被允许滚动的视图正确包裹。
2。从内容样式中删除 Flex: styles.content 中的 flex: 1 可能会阻止 ScrollView 正确滚动。您可以删除或调整它。
**3。将 ScrollView 移至主屏幕: 如果只需要滚动,请将其放置在 Home 组件内,而不是用 ScrollView 包装整个应用程序。
const Stack = createNativeStackNavigator();
const MainStackNavigator = () => (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
);
const App: React.FC = () => {
return (
<SafeAreaProvider>
<Contexts>
<NavigationContainer>
<View style={{ flex: 1 }}>
<MainStackNavigator />
</View>
</NavigationContainer>
</Contexts>
</SafeAreaProvider>
);
};
import React from 'react';
import { ScrollView, View, StyleSheet } from 'react-native';
import Header from './Header';
import Footer from './Footer';
const Home: React.FC = () => {
return (
<ScrollView contentContainerStyle={styles.scrollViewContent}>
<Header />
{/* Add your content here */}
<View style={styles.content}>
{/* Your main content */}
</View>
<Footer />
</ScrollView>
);
};
const styles = StyleSheet.create({
scrollViewContent: {
flexGrow: 1,
},
content: {
flex: 1,
},
});
export default Home;