Redux 中的 React-native 嵌套导航器

Question

我决定需要将常规的 react-nagivation 设置换成 redux 容器，主要是因为我需要跟踪登录状态等内容。

我不会说谎，因为这是我的第一个 react 导航，将它移到 redux 对我来说是一个非常混乱的事情，但是我一步一步地达到了我的基本结构正在工作的地步，嗯......几乎可以工作了。

我所拥有的是在一切之上的 StackNav，主屏幕是 TabNav。屏幕加载正常，切换到该* StackNav 的不同屏幕的应用程序部分工作正常。当我在该 TabNav 中从第一个选项卡切换到第二个选项卡时，会出现我的问题。 澄清一下，我有 2 个标签 - “主页”和“我的帐户”。 从家切换到我的帐户确实看起来正在切换选项卡，但组件没有正确呈现。它缺少渲染函数中的所有内容以及样式。然后，当我想切换回“主页”选项卡时，屏幕会滑动，就像我实际上会在* StackNav 之间切换，而不仅仅是在选项卡之间切换。最重要的是，现在回到“主页”选项卡后，我可以在左上角选择“返回”，使用时，它只是滑动到主页的“上一个”视图，即使它是同一个标签。

我在写这篇文章时很困惑，但希望有人能从中看出意义。这是我的代码：

*堆栈导航配置：

const routeConfiguration = {
  Home: { screen: HomeTabsNavigation },
  GameList: { screen: GameList },
  OfferDetails: { screen: OfferDetails },
}
const stackNavOptions = {
  initialRouteName: 'Home',
  mode: 'card',
  headerMode: 'float',
}
export const StackNavConfig = StackNavigator(routeConfiguration, stackNavOptions);

* Stack Nav 组件：

const mapStateToProps = (state) => {
  return {
    navigationState: state.stackNav,
  }
}

class StackNavigation extends React.Component {
  render() {
    const { dispatch, navigationState } = this.props
    return (
      <StackNavConfig
        navigation={
          addNavigationHelpers({
            dispatch,
            state: navigationState,
          })
        }
      />
    )
  }
}

export default connect(mapStateToProps)(StackNavigation)

HomeTabs 定义为顶层 StackNav 的第一屏：

const HomeTabs = TabNavigator({
  Home: { screen: HomeView },
  MyAccount: { screen: MyAccountView },
}, {
    tabBarOptions: tabBarOptions,
  });

export default HomeTabs;

HomeTabs 组件：

const mapStateToProps = (state) => {
  return {
    navigationState: state.homeTabs,
  }
}

class HomeTabsNavigation extends Component {
  render() {
    const { navigationState, dispatch } = this.props;
    return (
      <HomeTabs
        navigation={
          addNavigationHelpers({
            dispatch,
            state: navigationState,
          })
        }
      />
    );
  }
}

export default connect(mapStateToProps)(HomeTabsNavigation);

我的 Redux 商店：

const middleware = () => {
  return applyMiddleware(createLogger());
}

export default createStore(
  combineReducers({
    stackNav: (state, action) => StackNavConfig.router.getStateForAction(action, state),
    homeTabs: (state, action) => HomeTabs.router.getStateForAction(action, state),
  }),
  middleware(),
)

我的 TabNav 视图现在只是显示文本，所以我不会把它们放在这里，除非它很重要，然后我当然会更新代码。 帮助！ ;)

Answer 1

好的，我找到了问题所在。问题是我在* Stack Navigator 和嵌套的 Tab Navigator 中定义了相同的路由名称。

如您所见：

const routeConfiguration = {
  Home: { screen: HomeTabsNavigation },
  GameList: { screen: GameList },
  OfferDetails: { screen: OfferDetails },
}
const stackNavOptions = {
  initialRouteName: 'Home',
  mode: 'card',
  headerMode: 'float',
}
export const StackNavConfig = StackNavigator(routeConfiguration, stackNavOptions);

这里：

const HomeTabs = TabNavigator({
  Home: { screen: HomeView },
  MyAccount: { screen: MyAccountView },
}, {
    tabBarOptions: tabBarOptions,
  });

export default HomeTabs;

似乎这些路线可能在某个时候合并在一起，每当我的 Tab Nav 试图“返回”到他的“主”屏幕时，* Stack Nav 就会接管控制并加载它自己的'主屏幕位于之前的屏幕之上，准确地创建了屏幕的堆叠视图。我已将其重命名为“TabsHome”，一切正常。解决了！