React 导航 StackNavigator - 允许卡片中的场景扩展到可用之外 space

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
a Navigator（貌似与我自己的同名对象无关）
一个“Unknown”对象
一个CardStackTransitioner
一个Transitioner
a View（及其嵌入的 RCTView）
一个CardStack
还有两个Views
一对Container，每个包含：
一个Card
一个AnimatedComponent
另一个View
一个SceneView
最后是我的组件。

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

Answer 1

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

很难说您的目标是什么，但 StackNavigator 应该是您应用的 top-level 组件，而不是像您提供的代码片段那样嵌套。

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

React 导航 StackNavigator - 允许卡片中的场景扩展到可用之外 space

React navigation StackNavigator - allow scenes in card to expand beyond available space

react-native

react-navigation