在滚动视图内渲染反应导航屏幕

问题描述

我正在构建一个 React Native 应用程序，我想在其中添加一个滚动视图作为所有 UI 屏幕的包装器。我已将 Stack.Navigator 包裹在 ScrollView 中，但内容被剪裁在屏幕底部，屏幕结束后没有内容可见。 请看下面的代码

App.tsx

export default function App() {
  const [loading,setLoading] = useState(true);
  return loading ? (
    <AppSplashScreen onLoadComplete={() => setLoading(false)} />
  ) : (
    <NavigationContainer>
      <AuthProvider>
        <Provider>
          <ScrollView
            contentContainerStyle={{ minHeight: "100%",overflow: "visible" }}
            style={styles.container}
          >
            <Content />
          </ScrollView>
        </Provider>
      </AuthProvider>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 32,padding: 16,minHeight: "100%",},});

Content.tsx

const Content = () => {
  return (
    <Stack.Navigator
      initialRouteName="LandingPage"
      screenoptions={{
        headerShown: false,}}
    >
      <Stack.Screen name="LandingPage" component={Signup} />
    </Stack.Navigator>
  );
};

解决方法

尝试将其添加到 ScrollView 样式或 contentContainerStyle

flexGrow：1