[英]react navigation does't work when access another stack navigator
I have a problem with react navigation. 我有反应导航问题。 here are my navigation codes.
这是我的导航代码。
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',
}));
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;
export const headerStyle = {
display:'none'
}
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;
I create three stacks such as AppStack, StartStack, and AuthStack. 我创建了三个堆栈,例如AppStack,StartStack和AuthStack。 Those are used in createAppContainer() function and hope to access those are as
这些用于createAppContainer()函数,希望按如下方式访问它们
this.props.navigation.navigate('App')
this.props.navigation.navigate( '应用程序')
... I am able to access ...我可以访问
this.props.navigation.navigate('Start')
this.props.navigation.navigate( '开始')
and 和
this.props.navigation.navigate('Auth')
this.props.navigation.navigate( '验证')
. 。 These two stacks are works well.
这两个堆栈很好用。 Then I route from SignIn screen of AuthStack to AppStack using,
然后,我从AuthStack的登入画面航线使用AppStack,
this.props.navigation.navigate('App')
this.props.navigation.navigate( '应用程序')
I see the first page of AppStack, the Home Screen is rendered and suddenly come back to the AuthStack's SignIn Screen. 我看到了AppStack的第一页,呈现了主屏幕,然后突然回到AuthStack的登录屏幕。 Then I try to navigate it again, the same thing happens again.
然后,我尝试再次导航,同样的事情再次发生。 I use redux and make the redux integrated navigation.
我使用redux并进行redux集成导航。 Because i think this is a redux issue.
因为我认为这是一个redux问题。 But the issue still exists.
但是问题仍然存在。 All are works well but every time when I navigate to AppStack it came back to AuthStack .
一切正常,但是每次我导航到AppStack时,它都会回到AuthStack 。 anyone can solve that please help me!
任何人都可以解决,请帮助我!
After spending some hours, I can understand what is the problem! 花了几个小时后,我明白了问题所在!
setInterval(()=>{
***...some process***
}else{
clearInterval(this);
this.props.navigation.navigate('Auth');
}
},500);
this code is written in the splash screen. 此代码写在初始屏幕中。 I think the interval is cleared.
我认为间隔已清除。 but really it doesn't clear and I try to go to AppStack it returned to Auth after every 500ms.
但实际上并不清楚,我尝试进入AppStack,每隔500毫秒返回一次Auth。 Above code is an old one and I can't remember that!
上面的代码是旧代码,我不记得了!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.