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

Question

我正在查看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 的组合，但这些都不起作用。

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

Answer 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;