android - react-navigation 从嵌套导航器更改 Activity 选项卡

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

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

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

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

---

Best Answer-推荐答案

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

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;

关于android - react-navigation 从嵌套导航器更改 Activity 选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46776089/