使用嵌套导航器进行反应导航而不更新屏幕

时间:2017-04-24 14:17:51

标签: react-native redux react-navigation

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

虽然新屏幕不可见

0 个答案:

没有答案