react-native - TabNavigator 上的 React Navigation 注销按钮

标签 react-native react-navigation tabnavigator

我有一个 TabNavigator里面StackNavigator (在 StackNavigator 我有 login View 和 TabNavigator ,其中包含其他屏幕)。
问题是我必须制作类似' Logout 的东西' 选项卡上的按钮只是重定向到 Login看法。
如果我尝试简单地重定向到 LoginView , TabBar仍然出现在屏幕底部,这不是我想要的。
有什么办法可以点击TabBar按钮并返回初始StackNavigator ? (比如 OnPress 属性或类似的东西)。

这是我的路由器

const tab_bar = TabNavigator({
      Home: {
        screen: HomeScreen
      },
      Logout: {
        screen: LoginView  // this just show the view but the tabBar still appearing
      },
    });

const Login = StackNavigator({
  login: {
    screen: LoginView,
  },
  List: {
    screen: tab_bar
    ,navigationOptions: {header:null}
  }
},
{
  initialRouteName: 'login'
});

最佳答案

完毕!使用 tabBarOnPress属性(property)和Navigation Actions .

const tab_bar = TabNavigator({  // This tabNavigator is inside a stackNavigator, wich contains the 'login' view
   Home: {
     screen: Home
   },
   Logout: {
     screen: Logout     // Empty screen, useless in this specific case
       ,navigationOptions: ({navigation}) => ({
           tabBarOnPress: (scene, jumpToIndex) => {
               return Alert.alert(   // Shows up the alert without redirecting anywhere
                   'Confirmation required'
                   ,'Do you really want to logout?'
                   ,[
                     {text: 'Accept', onPress: () => { navigation.dispatch(NavigationActions.navigate({ routeName: 'login' }))}},
                     {text: 'Cancel'}
                    ]
               );
           },
       })
    },
});

当用户点击 logout tabBar 上的按钮显示警报以确认操作,然后如果用户接受重定向到登录 View 。

注意 (22/09/2017):要使用 tabBarOnPress 属性,请下载 master branch version (还不是 NPM 的版本)。

关于react-native - TabNavigator 上的 React Navigation 注销按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46285399/

相关文章:

react-native - React Native - 动态更改 tabnavigator 中的背景颜色

ios - 使用 Windows 为 IOS 构建 Expo 应用程序

react-native - 使用 deviceinfo 和地理位置对 native pormise.all 使用react

javascript - 如何在 jest/enzyme 中测试包含 useIsFocused() 导航钩子(Hook)的 react-native 文件?

javascript - 如何在嵌套屏幕之间导航并防止在 React Navigation 中返回?

reactjs - 设置选项卡导航器时出错 - ' Got an invalid Value for ' 组件的屏幕 'Home' Prop

react-native - 使用 redux 的选项卡导航器性能问题

javascript - 从 TabNavigator 内部 View 与 StackNavigator 的导航选项交互

react-native - 如何使用 rn-fetch-blob 在 react-native 中上传文件?

javascript - 在未识别的 native react 中导入 ES 模块