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

我正在渲染 StackNavigator 在…内 一 ScrollView 在导航期间保持不变的其他组件旁边。然而,当在带有小屏幕的手机上观看时,所发生的是 堆栈导航器 组件变得足够小,可以放在屏幕上,从而隐藏了我的一些内容,而不允许滚动。我的代码如下所示(删除了无关的详细信息):

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 展开以允许 卷轴视图 滚动查看中的所有内容 促使 ,但事实并非如此-内容在屏幕底部被切断,无法滚动。

查看组件的继承权 react-devtools 显示了正在注入布局的不同组件的令人困惑的阵列: 导航器 依次展开为:

• 一 NavigationContainer
• 一 导航器 (似乎与我自己的同名对象无关)
• an“ Unknown “对象
• 一 CardStackTransitioner
• 一 Transitioner
• 一 View (及其嵌入式 RCTView )
• 一 CardStack
• 还有两个 看法 s
• 一双 Container s、 每一个都包含:
• 一 Card
• 一 AnimatedComponent
• 另一个 看法
• 一 SceneView
• 最后是我的组件。

天真的是,我似乎需要申请 flexGrow 为了实现这一点,我对所有这些中间级别的样式进行了调整,但我看不到任何选项可以控制其中大多数的样式。如何让StackNavigator根据需要展开以启用滚动?