我有反应导航的问题。这是我的导航代码。
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;
我创建了三个堆栈,如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。任何人都可以解决,请帮助我!
花了几个小时后,我才明白这是什么问题!
setInterval(()=>{
***...some process***
}else{
clearInterval(this);
this.props.navigation.navigate('Auth');
}
},500);
此代码是在启动画面中编写的。我认为间隔已经清除。但实际上它并不清楚,我尝试去AppStack它每500ms后返回Auth。上面的代码是旧的,我不记得了!