在另一个视图中使用时没有出现 React Navigation StackNavigator答案

【问题标题】：React Navigation StackNavigator not appearing when used inside another view在另一个视图中使用时没有出现 React Navigation StackNavigator
【发布时间】：2018-04-01 17:04:21
【问题描述】：

我正在尝试将 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/>，它可以正常工作，因此组件本身在这种情况下肯定可以工作。

有什么想法吗？

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您的导航设置有问题。

StackNavigator 中的所有路由都必须声明一个屏幕如docs中所述

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

【讨论】：