使用React-Navigation(v1.0.0-beta.8),我的TabNavigator中的每个选项卡都嵌套了StackNavigator。导航状态由Redux处理。
TabNavigator工作正常;但是,在选项卡内部,导航到某个屏幕后,堆栈导航器不会更新。
实施例
// HomeTabNavigator
const HomeTabNavigator = TabNavigator({
Questions: {
screen: QuestionsStackNavigator,
},
Results: {
screen: ResultsStackNavigator,
},
}, { initialRouteName: 'Questions'});
// NavigationReducer
const reducer = (state, action) => {
const newState = HomeTabNavigator.router.getStateForAction(action, state);
return newState || state;
};
// QuestionsStackNavigator
const QuestionsStackNavigator = StackNavigator(
{
QuestionsContainer: { screen: QuestionsContainer },
QuestionContainer: { screen: QuestionContainer },
},
{
initialRouteName: 'QuestionsContainer',
}
);
QuestionsStackNavigator.navigationOptions = {
tabBarLabel: () => <TabBarLabel label="Questions" />,
tabBarIcon: ({ tintColor }) => (
<TabBarIcon src={iconImage} style={{ tintColor }} />
),
};
export default QuestionsStackNavigator;
// QuestionsContainer
class QuestionsContainer extends React.Component {
static navigationOptions = {
title: 'Questions',
}
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('QuestionContainer')}
title="Open Question"
/>
);
}
}
最初的Redux状态是
{
navigation: {
index: 0,
routes: {
0: {
index: 0,
routes: {
0: {
routeName: "QuestionsContainer",
key: "Init"
}
}
},
...
}
}
}
单击按钮后,状态会发生如下变化:
{
navigation: {
index: 0,
routes: {
0: {
index: 0,
routes: {
0: {
routeName: "QuestionsContainer",
key: "Init"
},
1: {
routeName: "QuestionContainer",
key: "id-1737252528-0"
}
}
},
...
}
}
}
虽然新屏幕不可见