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

时间：2017-10-16 17:42:27

标签： android ios react-native react-navigation

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

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

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

我想说我想推出listsTab的产品界面。我想让它切换标签并将产品路线推到shopTab上的StackNavigator上。我一直无法找到办法。

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

我还试图使用product和this.props.navigation.dispatch的组合，但这些都没有奏效。

我认为我错过了一些简单的东西，因为这似乎是能够写入应用程序的基本行为，但我无法看到它。

1 个答案:

答案 0 :(得分：0)

正如所承诺的那样，堆叠在堆栈中的标签中，所有连接并通过导航进行导航。

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;
相关问题
最新问题