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

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

正如 promise 的那样，堆叠在标签中，所有连接都通过 navigate 进行导航。

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;