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

【问题标题】：Rendering react navigation screens inside a scrollview在滚动视图中渲染反应导航屏幕
【发布时间】：2020-12-24 21:05:24
【问题描述】：

我正在构建一个反应原生应用程序，我想在其中添加一个滚动视图作为所有 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%",
  },
});

内容.tsx

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

【问题讨论】：

标签： reactjs react-native react-navigation react-native-navigation

【解决方案1】：

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

弹性增长：1

【讨论】：