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

Question

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

应用程序.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%",
  },
});

内容.tsx

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

Answer 1

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

弹性增长：1