标题不滚动

问题描述 投票:0回答:1

我有以下 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 组件放入滚动视图中。

typescript react-native
1个回答
0
投票

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;
© www.soinside.com 2019 - 2024. All rights reserved.