访问另一个堆栈导航器时,反应导航不起作用

问题描述 投票:0回答:1

我有反应导航的问题。这是我的导航代码。

Navigation.js

const StartStack = createStackNavigator({
    First: EmptyScreen,
    Splash: SplashScreen 
},
{
    transitionConfig: () => fromBottom(),
});
const AppStack = createStackNavigator({
    Home: TabSet
},
{
   transitionConfig: () => fromRight(),
});
const AuthStack = createStackNavigator({ 
   SignIn: SignInScreen,
   SignUp: SignUpScreen,
   ForgotPassword: ForgotPasswordScreen
},
{
    transitionConfig: () => fromTop(),
});

export default createAppContainer(createSwitchNavigator({
   Start: StartStack,
   Auth: AuthStack,
   App: AppStack,
},
{
  initialRouteName: 'Start',
}));

Tabset.js

import React , { Component } from 'react';
import { View } from 'react-native';
import * as navOptions from '../../navigate/navigationOptions';
import BackgroundImage from '../../components/BackgroundImage';

class TabSet extends Component{

    static navigationOptions = { headerStyle: navOptions.headerStyle};

    render(){
        return(
            <View>
                <BackgroundImage>
                </BackgroundImage>
            </View>
        );
    }
}

export default TabSet;

NavigationOptions.js

export const headerStyle = {
    display:'none'
}

BackgroundImage.js

import React , { Component } from 'react';
import { View , ImageBackground , StyleSheet } from 'react-native';
import backgroundImage from '../../assets/images/backgroundImage.png';

class BackgroundImage extends Component{
    render(){
        return(
            <View>
                <ImageBackground 
                    source={backgroundImage} 
                    style = {styles.bgImg}
                    imageStyle = {{resizeMode : 'stretch'}}>
                        {this.props.children}
                 </ImageBackground>
            </View>
        )
     }
 }
 const styles = StyleSheet.create({
  bgImg : {
    width: '100%',
    height: '100%'
  }
 })
 export default BackgroundImage;

我创建了三个堆栈,如AppStack,StartStack和AuthStack。那些用在createAppContainer()函数中,希望能够访问那些as

this.props.navigation.navigate( '应用程序')

......我能够访问

this.props.navigation.navigate( '开始')

this.props.navigation.navigate( '验证')

。这两个堆栈运行良好。然后我从AuthStack的LogIn屏幕路由到AppStack使用,

this.props.navigation.navigate( '应用程序')

我看到AppStack的第一页,主屏幕被渲染并突然回到AuthStack的SignIn屏幕。然后我尝试再次导航它,同样的事情再次发生。我使用redux并制作redux集成导航。因为我认为这是一个redux问题。但问题仍然存在。一切都运行良好,但每次当我导航到AppStack时,它都会回到AuthStack。任何人都可以解决,请帮助我!

javascript react-native react-redux react-navigation expo
1个回答
0
投票

花了几个小时后,我才明白这是什么问题!

setInterval(()=>{
  ***...some process***
  }else{
    clearInterval(this);
    this.props.navigation.navigate('Auth');
  }
},500);

此代码是在启动画面中编写的。我认为间隔已经清除。但实际上它并不清楚,我尝试去AppStack它每500ms后返回Auth。上面的代码是旧的,我不记得了!

© www.soinside.com 2019 - 2024. All rights reserved.