反应导航StackNavigator - 允许卡中的场景扩展到可用空间之外

Question

我在<{1}}内部StackNavigator 和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依次扩展为：

• a NavigationContainer
• a Navigator（看似与我自己的名字无关）
• “Unknown”对象
• a CardStackTransitioner
• a Transitioner
• 一个View（及其嵌入的RCTView）
• a CardStack
• 另外两个View s
• 一对Container个，其中每个都包含：
• a Card
• AnimatedComponent
• 另一个View
• a SceneView
• 最后是我的组件。

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

Answer 1

StackNavigator（或者反应导航提供的其他导航器）不打算在ScrollViews中渲染。

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

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