在另一个视图中使用时，React Navigation StackNavigator 不会出现

Question

我正在尝试将 React Navigation StackNavigator 用于一个进程，该进程在页面顶部包含一个静态组件，在底部包含不同的组件。我使用的代码是：

const Navigator = StackNavigator ({
        splash: Splash,
        prompt: Prompt,
        pinCheck: PinCheck
}, {
    initialRouteName: 'splash'
});

export default class Login extends React.Component
{
    constructor (props)
    {
        super (props);

        // code to set up animation state    
    }

    componentDidMount()
    {
        // code to set up animation
    }

    finish_ (state)
    {
        this.props.navigation.navigate ('main', state);
    }

    render()
    {
        const screen = Dimensions.get('screen');

        return (
            <KeyboardAvoidingView style={Global.styles.verticalFill} ref={this.saveContainerRef}>
                <ScrollView style={{flex: 1}} contentContainerStyle={{justifyContent: 'space-between'}}>
                    <Animated.View style={{opacity:this.state.fade1,alignItems:'center'}} >
                            <Image
                                        style={{width:screen.width * 0.6,height: screen.height*0.55}}
                                        source={imgLogo}
                                        resizeMode='contain'
                                    />
                            <Navigator />
                    </Animated.View>
                </ScrollView>
            </KeyboardAvoidingView>
        );
    }
}

当我运行但是，我的初始路由组件没有显示。但是，如果我将 <Navigator/> 换成 <Splash/>，它可以正常工作，因此组件本身肯定可以在这种情况下工作。

有什么问题吗？

Answer 1

您的导航设置有问题。

All the routes in the StackNavigator must declare a screen as mentioned in the docs

const Navigator = StackNavigator ({
    splash: {
        screen: splash
    },
    prompt: {
        screen: prompt
    },
    pinCheck: {
        screen: pinCheck
    }
}, {
    initialRouteName: 'splash'
})

在另一个视图中使用时，React Navigation StackNavigator 不会出现

React Navigation StackNavigator not appearing when used inside another view

react-native

react-navigation