您的位置: 首页  >  技术问答  >  react-navigation从嵌套导航器更改活动标签

react-navigation从嵌套导航器更改活动标签

分类: 技术问答 • 2022-08-10 11:22:03
问题描述：

我正在看react-navigation，并且在将新屏幕推到除用户当前所在的标签以外的选项卡时遇到很多问题，并且它将切换标签并将路线推向I指定。react-navigation从嵌套导航器更改活动标签

我正在使用的导航结构如下，带有一个带有TabNavigator屏幕的StackNavigator，每个选项卡都有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的组合，但都没有工作。

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

答

按照承诺，堆叠在标签中，全部连接并通过导航进行导航。

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;

相关推荐