Android 在组件之间导航将重新加载导航器路由中的所有组件
我在某个地方读到,当您使用Android 在组件之间导航将重新加载导航器路由中的所有组件,android,react-native,react-redux,react-navigation,Android,React Native,React Redux,React Navigation,我在某个地方读到,当您使用react-navigation包中的任何导航器时,如果您实现了redux;导航器路线中的每个组件都将重新加载(即组件将接收道具) 但是,我有两个用户可以登录的页面 export const MainScreenTabNavigator = TabNavigator({ Start: { screen: Start, navigationOptions: { title: 'Start',
react-navigation
包中的任何导航器时,如果您实现了redux;导航器路线中的每个组件都将重新加载(即组件将接收道具)
但是,我有两个用户可以登录的页面
export const MainScreenTabNavigator = TabNavigator({
Start: {
screen: Start,
navigationOptions: {
title: 'Start',
},
},
},{
tabBarPosition: "bottom",
tabBarOptions: {
activeTintColor: '#222',
labelStyle: {
color: '#ddd',
},
style: { backgroundColor: '#333' },
}
});
export const AppNavigator = StackNavigator({
Main: {
screen: MainScreenTabNavigator, // Nested tab navigator
},
Login: {
screen: Login,
navigationOptions: {
title: 'Aanmelden',
}
},
Camera: {
screen: AppCamera,
navigationOptions: {
title: 'Camera',
}
}
}, {
mode: 'modal',
headerMode: 'none',
});
登录屏幕最初显示给用户。它有一个表单,用户可以手动输入凭证,还有一个按钮可以导航到摄像头,用户可以在其中扫描带有登录凭证的二维码
在这两种情况下,用户都会发送登录操作。
登录页面和相机页面都会侦听相同的道具更改:
componentWillReceiveProps(nextProps) {
if (nextProps.account.loginSuccess) {
this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'Start' }));
} else {
if (nextProps.account.loginError) {
Toast.showLongBottom(nextProps.loginError);
}
}
this.setState({spinnerVisible: false});
}
应用程序成功导航到“开始”,但当它导航到“开始”时,登录页面和相机页面都被重新加载,导致无限循环进入组件WillReceiveProps
,并一次又一次无限导航到“开始”
这是我的导航减速器:
function nav(state = initialNavState, action) {
const nextState = AppNavigator.router.getStateForAction(action, state);
// Simply return the original `state` if `nextState` is null or undefined.
return nextState || state;
}
我能做些什么来防止这种行为?嗯
作为临时解决方案,我在导航状态中引入了另一个布尔值:
function nav(state = initialNavState, action) {
let nextState = null;
if (action.type === 'Navigation/NAVIGATE' && action.routeName === 'Start') {
nextState = {...AppNavigator.router.getStateForAction(action, state), authenticated: true};
} else {
nextState = AppNavigator.router.getStateForAction(action, state);
}
// Simply return the original `state` if `nextState` is null or undefined.
return nextState || state;
}
我使用authenticated
检查登录或摄像头组件是否应在登录后导航至启动
它起作用了,但我还是觉得我错过了什么