Question

我已经决定我需要将常规反应 - nagivation设置替换为redux容器，主要是因为我需要跟踪登录状态等内容。

我不会撒谎，因为我的第一反应导航将它移动到redux对我来说是一个很大的混乱，但是我一步一步地到达了我的基本点结构正在运作，好......几乎正常工作。

我拥有的是所有内容的StackNav，主屏幕是TabNav。屏幕加载正常，并且切换到顶级StackNav的不同屏幕的应用程序部分工作正常。我在TabNav中从第一个标签切换到第二个标签时出现问题。为了澄清，我有两个标签 - ＆＃39; Home＆＃39;和我的帐户＆＃39;。从家庭切换到我的帐户确实看起来正在切换标签，但组件未正确呈现。它与样式一起缺少渲染函数中的所有内容。然后，当我想切换回＆＃39; Home＆＃39;选项卡，屏幕滑动，就像我实际在顶级StackNav之间切换，而不是仅仅在选项卡之间切换。最重要的是，现在回到“家庭＆＃39;标签，我已经可以选择“返回”。在左上角，当使用时，只需滑动到之前的＆＃39;家庭的观点，即使它是相同的标签。

我写这篇文章时感到很困惑，但希望有人能够在那里看到感觉。这是我的代码：

顶级Stack Nav配置：

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'，一切正常。解决！

Redux中的React-native嵌套导航器

1 个答案: