如何解决在滚动视图内渲染反应导航屏幕
我正在构建一个 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。