react-native - 使用嵌套导航器不更新屏幕的反应导航

Question

使用 React-Navigation (v1.0.0-beta.8)，我为 TabNavigator 中的每个选项卡嵌套了一个 StackNavigator。导航状态由 Redux 处理。

TabNavigator 工作正常；但是，在选项卡内，堆栈导航器在导航到某个屏幕后不会更新。

例子

// HomeTabNavigator

const HomeTabNavigator = TabNavigator({
  Questions: {
    screen: QuestionsStackNavigator,
  },
  Results: {
    screen: ResultsStackNavigator,
  },
}, { initialRouteName: 'Questions'});

// 导航减速器

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;

// 问题容器

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"
          }
        }
      },
      ... 
    }
  }
}

虽然新屏幕不可见