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

导航设置存在问题。

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

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

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

1 个答案: