Question

我正在使用ReactNavigation，在登录后，我进入我的主页。我的主页有4个选项卡，在第4个选项卡上我有注销按钮。点击退出按钮后，我应该回到SIGN IN屏幕。

我面临的问题是，我无法重置TAB NAVIGATOR。

          this.props.navigation.dispatch({
        type: NavigationActions.NAVIGATE,
        routeName: 'SignIn',
        action: {
          type: NavigationActions.RESET,
          index: 0,
          actions: [{type: NavigationActions.NAVIGATE, routeName: 'SignIn'}]
        }
      })

我尝试应用上面的代码块进行导航，但它没有用。请告诉我，如何摆脱标签浏览器。

Answer 1

您的根级导航应该是StackNavigator，其子项看起来像这样：

欢迎屏幕
登录屏幕
Tab Navigator（用于登录主屏幕）
- Tab 1
- Tab 2
- Tab 3
- 标签4（带注销按钮）

要重置TabNavigator，您不应该发送NavigationActions.NAVIGATE类型的操作，因为它会推送到当前导航堆栈，而不是从状态中删除选项卡导航器。相反，请考虑使用Reset action。因此，您的注销功能中的代码应该具有：

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'Login'})
  ]
})
this.props.navigation.dispatch(resetAction);

Answer 2

注销的onPress我们在代码

下面调用

  const resetAction = NavigationActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: "SignIn" })],
    key: null 
  });
  this.props.navigation.dispatch(resetAction);

这是我们的AppNavigation文件有没有办法在Logout上重置应用程序

const PrimaryNav = StackNavigator(
  {
    SignIn: {
      screen: SignIn,
      navigationOptions: {
        headerMode: "none",
        header: null
      }
    },
    SignUp: {
      screen: SignUp,
      navigationOptions: {
        headerMode: "none",
        header: null
      }
    },
    TabsScreen: {
      screen: TabsScreen,
      navigationOptions: {
        headerMode: "float",
        headerTitleStyle: { color: "#ffffff" },
        gesturesEnabled: true,
        header: null,
      }
    },
)
export const sideMenuStack = StackNavigator({
    SideMenu: {
        screen: SideMenu,
        navigationOptions: {
            headerMode: "none",
            header: null
        }
    },
    Settings: {
        screen: Settings,
        navigationOptions: ({ navigation }) => ({
            title: "Settings",
        })
    },
    SignIn: {
      screen: SignIn,
      navigationOptions: {
        headerMode: "none",
        header: null
      }
    },
)
export const FeedsStack = StackNavigator({
    FeedsStack: {
        screen: FeedsStack,
        navigationOptions: {
            headerMode: "none",
            header: null
        }
    },
    Post: {
        screen: Post,
        navigationOptions: ({ navigation }) => ({
            title: "Post",
        })
    },
)
export const UserStack = StackNavigator({
    UserStack: {
        screen: UserStack,
        navigationOptions: {
            headerMode: "none",
            header: null
        }
    },
    Friends: {
        screen: Friends,
        navigationOptions: ({ navigation }) => ({
            title: "Friends",
        })
    },
)
export const TabView = TabNavigator(
  {
    FeedsStack: {
      screen: FeedsStack,
      navigationOptions: {
        tabBarLabel: "Feeds",
        scrollEnabled: true,
        focussed: true,
        tabBarIcon: ({ tintColor }) =>
          <Image
            source={Images.feedsActive}
            style={[styles.icon, { tintColor: tintColor }]}
          />
      }
    },
    UserStack: {
      screen: UserStack,
      navigationOptions: {
        tabBarLabel: "Users",
        tabBarIcon: ({ tintColor }) =>
          <Image
            source={Images.UserActive}
            style={[styles.icon, { tintColor: tintColor }]}
          />
      }
    },
    sideMenuStack: {
      screen: sideMenuStack,
      navigationOptions: {
        tabBarLabel: "More",
        headerMode: "screen",
        tabBarIcon: ({ tintColor }) =>
          <Image
            source={Images.moreActive}
            style={[styles.icon, { tintColor: tintColor }]}
          />
      }
    }
  },
  //Default configurations for Tabs
  {
    tabBarPosition: "bottom",
    animationEnabled: true,
    tabBarOptions: {
       indicatorStyle:{
        borderBottomColor:'#32a1fe',
        borderBottomWidth:3
      },
      showLabel: true,
      backBehavior: "none",
      showIcon: true,
      activeTintColor:"#338AD8",
      inactiveTintColor:"#BEC5CB",
      upperCaseLabel:false,
      labelStyle :[styles.labelStyle],
    }
  }
);

注销后无法导航到登录屏幕。

2 个答案: