Question

我正在创建社交媒体应用程序，并且具有以下屏幕过渡图：

主要->个人资料->关注者->约翰的个人资料->约翰的关注者-> 艾米丽的个人资料-> ....

如何实现这样的流程？目前，我的路由器实现存在错误，无法嵌套，它返回上一屏。

这是路由器中表达我的问题的部分：

const appStack = createStackNavigator(
  {
    [PROFILE_STACK]: { screen: profileStack },
    [PROFILE_FOLLOWERS_STACK]: { screen: profileFollowersStack },
    [PROFILE_FOLLOWINGS_STACK]: { screen: profileFollowingsStack }
  },
  {
    initialRouteName: PROFILE_STACK,
    headerMode: "none"
  }
);

const profileStack = createStackNavigator(
  {
    [PROFILE]: {
      screen: UserProfileScreen,
      navigationOptions: () => ({
        header: null
      })
    }
  },
  {
    initialRouteName: PROFILE
  }
);

const profileFollowersStack = createStackNavigator(
  {
    [PROFILE_FOLLOWERS]: {
      screen: UserFollowersScreen,
      navigationOptions: () => ({
        header: null
      })
    }
  },
  {
    initialRouteName: PROFILE_FOLLOWERS
  }
);

const profileFollowingsStack = createStackNavigator(
  {
    [PROFILE_FOLLOWINGS]: {
      screen: UserFollowingsScreen,
      navigationOptions: () => ({
        header: null
      })
    }
  },
  {
    initialRouteName: PROFILE_FOLLOWINGS
  }
);

export const goUserProfile = function(navigation, userId) {
  const { navigate } = navigation;
  navigate(PROFILE_STACK, {
    userId: userId
  });
};

export const goUserFollowers = function(navigation, userId) {
  const { push } = navigation;
  push(PROFILE_FOLLOWERS_STACK, {
    userId: userId
  });
};

export const goUserFollowings = function(navigation, userId) {
  const { push } = navigation;
  push(PROFILE_FOLLOWINGS_STACK, {
    userId: userId
  });
};

Answer 1

问题是我在navigate()中使用goUserProfile()方法，而不是push()。使用push()之后，我的问题解决了。

参考：

React Navigation V2: Difference between navigation.push and navigation.navigate

反应导航动态子屏幕

1 个答案: