React Navigation StackNavigator - 允许卡片中的场景扩展到可用空间之外

Question

我正在渲染 StackNavigator inside ScrollView 以及在导航期间保持不变的其他组件。然而，当在小屏幕手机上查看时，StackNavigator 组件变得足够小以适合屏幕，因此隐藏了我的一些内容，而不是允许滚动发生。我的代码看起来像这样（删除了无关的细节）：

const Navigator = StackNavigator ({
    splash: { screen: Splash },
    prompt: { screen: Prompt }, 
    ...
}, {
    initialRouteName: 'splash',
    headerMode: "none",
    cardStyle: { 
        backgroundColor: "transparent",
        flex: 1
    }
});

...

    render () {
       return (
           <KeyboardAvoidingView style={{... flex: 1 ...}}>
                <ScrollView
                    style={{... flex: 1 ...}} 
                    contentContainerStyle={{
                        flexGrow: 1, 
                        justifyContent: "space-around",
                        alignItems: "center"
                    }}>
                    [other items here]
                    <Navigator />
                </ScrollView>
            </KeyboardAvoidingView>
        );
    }

Splash 组件非常小 - 它只呈现单行文本 - 但是当它被 Prompt （更大）替换时，我预计 Navigator 会扩展以允许 ScrollView滚动查看Prompt 中的所有内容，但它不这样做 - 内容在屏幕底部被截断，无法滚动。

查看带有react-devtools 的组件的层次结构会显示一个令人眼花缭乱的不同组件数组：Navigator 依次扩展为：

• NavigationContainer
• Navigator（似乎与我自己的同名对象无关）
• 一个“Unknown”对象
• CardStackTransitioner
• Transitioner
• View（及其嵌入的RCTView）
• CardStack
• 还有两个Views
• 一对Containers，每个都包含：
• Card
• AnimatedComponent
• 另一个View
• SceneView
• 最后是我的组件。

天真地，似乎我需要以某种方式将flexGrow 样式应用于所有这些中间级别才能使其正常工作，但我看不到任何用于控制其中大多数样式的选项。如何让 StackNavigator 根据需要展开以启用滚动？

Answer 1

StackNavigator（或 react-navigation 提供的其他导航器）不打算在 ScrollViews 内呈现。

很难说你的目标是什么，但是 StackNavigator 应该是你应用的顶级组件，而不是像你提供的代码 sn-p 那样嵌套。

我的建议是创建显示内容的屏幕组件（这些屏幕组件可以包括 ScrollView）。然后将屏幕放到 StackNavigator 中，并渲染创建的 StackNavigator。