如何使TabNavigator的一个按钮，按下一个模式屏幕阵营导航

问题描述：

使用阵营导航标签导航https://reactnavigation.org/docs/navigators/tab如何使标签按钮中的一个推屏起来作为一个全屏幕模式？我看到堆栈导航器有一个mode=modal选项。点击TakePhoto选项卡按钮时，如何获得该模式？点击它目前仍然显示底部的标签栏。使标签栏消失如何使TabNavigator的一个按钮，按下一个模式屏幕阵营导航

const MyApp = TabNavigator({ 
    Home: { 
    screen: MyHomeScreen, 
    }, 
    TakePhoto: { 
    screen: PhotoPickerScreen, // how can I have this screen show up as a full screen modal? 
    }, 
});

你是怎么解决这个问题？我一直试图弄清楚一段时间 – IamLasse

答

其实，有在react-navigation不支持从default动态更改演示的方式modal（查看有关此here的讨论）。我遇到了同样的问题，并与headerMode设置为none和mode设置为modal解决它通过使用最顶端StackNavigator：

const MainTabNavigator = TabNavigator(
    { 
     Tab1Home: { screen: Tab1Screen }, 
     Tab2Home: { screen: Tab2Screen } 
    } 
); 

const LoginRegisterStackNavigator = StackNavigator({ 
    Login: { screen: LoginScreen } 
}); 

const ModalStackNavigator = StackNavigator({ 
    MainTabNavigator:   { screen: MainTabNavigator   }, 
    LoginScreenStackNavigator: { screen: LoginRegisterStackNavigator } 
}, { 
    headerMode: 'none', 
    mode:  'modal' 
});

这让我做了以下（使用终极版）在Tab1Screen和Tab2Screen带来从最高的地方我想要的模式的看法：

this.props.navigation.navigate('LoginScreenStackNavigator');

你能从tab按钮中调用this.props吗？怎么样？ – IamLasse

@IamLasse你的意思是从一个标签页面或标签按钮本身？ “不幸的是”我使用的是REDX，所以我认为我有不同的情况:-) –

我也使用REDX。但我无法派发一个事件来打开弹出窗口模式，或者从导航配置所在的主导航器堆栈中调用道具。 – IamLasse

答

一种方式是隐藏与visible: false使用TabBar：

const MyApp = TabNavigator({ 
    Home: { 
    screen: MyHomeScreen, 
    }, 
    TakePhoto: { 
    screen: PhotoPickerScreen, 
    navigationOptions: { 
     tabBar: { 
     visible: false, 
     }, 
    }, 
    }, 
});

然而，这似乎并没有触发任何过渡到全屏，我猜是期望？

另一个选项可以是包裹PhotoPickerScreen新StackNavigator内部和导航器设置为模式=“模式”。

您可能需要触发导航从onPress（如：navigation.navigate('TakePhoto')）

注意语气中的TabItem上不知何故，我想总结我围绕如何最好地安排自己的导航头，所以...

第三种选择，将StackNavigator作为父项，然后将MyApp TabNavigator作为其内部的第一条路径添加，可能是最灵活的解决方案。然后TakePhoto屏幕将与TabNavigator处于同一级别，允许您从任何地方路由到它。

感兴趣地听到你想出！

是的我自己仍然有问题 - 你有没有找到一种方法来设置选项卡项目本身的onPress事件？我没有看到任何拦截该按钮的方法。 – MonkeyBonkey

答

文档在某些方面修修补补，但在这里它是：

export default class HomeScene extends Component { 

     static navigationOptions = { 
     title: 'foo', 
     header:{ 
        visible: true 
       } 
     } 
     .... 
     }

答

不知道这仍然是相关的你，但我已经成功地找到除了爱情之外，以实现这一目标。

所以我设法得到它的工作通过使用tabNavigatorConifg内tabBarComponent，您可以根据索引导航停止的标签导航。

tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
     <TabBarBottom 
      {...props} 
      jumpToIndex={index => { 
       if (index === 2) { 
        navigation.navigate('camera') 
       } 
       else { 
        jumpToIndex(index) 
       } 
      }} 
     /> 

    )

一旦你做到了这一点，我在显示的选项卡视图顶部视图模态的方法是把与TabNavigator一个stacknavigatior内，然后就浏览到一个新屏幕stacknavigator内。

非常感谢你的男人;） –

我没有得到这部分“一旦你做完了这个，我在模式上显示视图顶部的标签视图的方法是把tabnavigator里面的一个stacknavigatior，然后导航到一个堆叠导航器内部的新屏幕。“你不会把堆栈导航器放在标签里面吗？ – arcom

如何使TabNavigator的一个按钮，按下一个模式屏幕阵营导航

相关推荐