react-navigation 从嵌套导航器更改活动选项卡

Posted 2023-03-15

技术标签:

【中文标题】react-navigation 从嵌套导航器更改活动选项卡【英文标题】：react-navigation change active tab from nested navigator 【发布时间】：2017-10-16 17:42:26 【问题描述】：

我正在查看react-navigation，并且在将新屏幕推送到用户当前所在的选项卡以外的选项卡并让它切换选项卡并推送我指定的路线时遇到很多麻烦。

我使用的导航结构如下，StackNavigator 的屏幕为 TabNavigator，每个选项卡都有 StackNavigator 的屏幕。

StackNavigator(
  root: 
    screen: TabNavigator(
      shopTab: 
        screen: StackNavigator(
          shopIndex: ShopIndexScreen,
          product: ProductScreen
        )
      ,
      listsTab: 
        screen: StackNavigator(
          listsIndex: ListsIndexScreen
        )
      
    )
  
)

假设我想从listsTab 推送产品屏幕。我想让它切换选项卡并将产品路线推送到shopTab 上的 StackNavigator。我一直无法找到一种方法来做到这一点。

我希望能够在ListsIndexScreen 中使用this.props.navigation.navigate('product')，但似乎导航器像这样嵌套，库无法找到带有product 键的屏幕。

我也尝试使用this.props.navigation.dispatch 和NavigationActions.navigate/replace 的组合，但这些都不起作用。

我认为我遗漏了一些简单的东西，因为这似乎是能够写入应用程序的非常基本的行为，但我看不到它。

【问题讨论】：

【参考方案1】：

正如承诺的那样，堆栈中的选项卡中的堆栈，所有连接和导航都通过导航。

import React,  Component  from 'react';
import  Text, View, TouchableOpacity, Dimensions  from 'react-native';
import  TabNavigator, StackNavigator  from 'react-navigation';

const device_width = Math.round(Dimensions.get('window').width);
const device_height = Math.round(Dimensions.get('window').height);

const viewStyle = 
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    width:device_width, 
    height: device_height, 
;

const Home = ( navigation ) => (
    <View style=...viewStyle, backgroundColor:'green'>
        <Text>HOME</Text>
        <TouchableOpacity onPress=() => navigation.navigate('Home')><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home2')><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home3')><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home4')><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home5')><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home6')><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home7')><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home8')><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)

const Home2 = ( navigation ) => (
    <View style=...viewStyle, backgroundColor:'blue'>
        <Text>HOME2</Text>
        <TouchableOpacity onPress=() => navigation.navigate('Home')><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home2')><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home3')><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home4')><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home5')><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home6')><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home7')><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home8')><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)

const Home3 = ( navigation ) => (
    <View style=...viewStyle, backgroundColor:'yellow'>
        <Text>HOME3</Text>
        <TouchableOpacity onPress=() => navigation.navigate('Home')><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home2')><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home3')><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home4')><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home5')><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home6')><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home7')><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home8')><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)

const Home4 = ( navigation ) => (
    <View style=...viewStyle, backgroundColor:'red'>
        <Text>HOME4</Text>
        <TouchableOpacity onPress=() => navigation.navigate('Home')><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home2')><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home3')><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home4')><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home5')><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home6')><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home7')><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home8')><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)

const Home5 = ( navigation ) => (
    <View style=...viewStyle, backgroundColor:'teal'>
        <Text>HOME5</Text>
        <TouchableOpacity onPress=() => navigation.navigate('Home')><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home2')><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home3')><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home4')><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home5')><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home6')><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home7')><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home8')><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)

const Home6 = ( navigation ) => (
    <View style=...viewStyle, backgroundColor:'white'>
        <Text>HOME6</Text>
        <TouchableOpacity onPress=() => navigation.navigate('Home')><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home2')><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home3')><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home4')><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home5')><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home6')><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home7')><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home8')><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)

const Home7 = ( navigation ) => (
    <View style=...viewStyle, backgroundColor:'lightgrey'>
        <Text>HOME7</Text>
        <TouchableOpacity onPress=() => navigation.navigate('Home')><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home2')><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home3')><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home4')><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home5')><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home6')><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home7')><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home8')><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)

const Home8 = ( navigation ) => (
    <View style=...viewStyle, backgroundColor:'lightgreen'>
        <Text>HOME8</Text>
        <TouchableOpacity onPress=() => navigation.navigate('Home')><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home2')><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home3')><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home4')><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home5')><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home6')><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home7')><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress=() => navigation.navigate('Home8')><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)



const StackNav2 = StackNavigator(
    
        Home6: 
            screen: Home6,
        ,
        Home7: 
            screen: Home7,
        ,
        Home8: 
            screen: Home8,
        
    ,
    
   headerMode: 'none',
   mode: 'card',
   navigationOptions: 
     gesturesEnabled: true,
   ,
   initialRouteName: 'Home7',

);

const TabNav = TabNavigator(
    
        Home4: 
            screen: Home4,
            navigationOptions: 
                tabBarLabel: 'Home4',
            ,
        ,
        Home5: 
            screen: Home5,
            navigationOptions: 
                tabBarLabel: 'Home5',
            ,
        ,
        StackNav2: 
            screen: StackNav2,
            navigationOptions: 
                tabBarLabel: 'Home6',
            ,
        ,
    , 
        tabBarPosition: 'bottom',
        animationEnabled: false,
        lazy: true,
        tabBarOptions: 
            activeTintColor: 'white',
            activeBackgroundColor: 'rgba(152, 187, 45, 1)',
        ,
);

const Nav = StackNavigator(
    
        Home: 
            screen: Home,
        ,
        Home2: 
            screen: Home2,
        ,
        Home3: 
            screen: Home3,
        ,
        Tab: 
            screen: TabNav,
        
    ,
    
   headerMode: 'none',
   mode: 'card',
   navigationOptions: 
     gesturesEnabled: true,
   ,
   initialRouteName: 'Home',

);




export default Nav;

【讨论】：

以上是关于react-navigation 从嵌套导航器更改活动选项卡的主要内容，如果未能解决你的问题，请参考以下文章

如何重置嵌套的堆栈导航导航器 react-navigation v5

React Native刷新屏幕/组件/更改状态

如何在react-navigation中获取当前路由名称？

从嵌套屏幕导航到不同选项卡堆栈中的另一个嵌套屏幕（反应导航）

从嵌套的 StackNavigator 中隐藏 TabBar 的反应导航屏幕

只有一些导航器的不变违规（React-Navigation）