Redux 中的 React-native 嵌套导航器

Question

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

我不会说谎，因为这是我的第一个 React 导航，将其移至 redux 对我来说非常混乱，但一步一步地，我已经达到了我的基本结构可以正常工作的地步。 .. 快工作了。

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

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

顶级堆栈导航配置：

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 试图 'back' 到他的 'Home' 屏幕时，顶级 Stack Nav 接管了控制并加载它自己的 'Home' 屏幕在之前的屏幕之上，创建它的真实面目，即屏幕的堆叠视图。我已将其重命名为 'TabsHome' 并且一切正常。已解决！

Redux 中的 React-native 嵌套导航器

React-native nested navigators within Redux

reactjs

react-native

redux

react-redux

react-navigation