react-navigation從嵌套導航器更改活動標籤

Question

我正在看react-navigation，並且在將新屏幕推到除用戶當前所在的標籤以外的選項卡時遇到很多問題，並且它將切換標籤並將路線推向I指定。

我正在使用的導航結構如下，帶有一個帶有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的組合，但都沒有工作。

我假設我錯過了一些簡單的東西，因爲這似乎是非常基本的行爲，能夠寫入應用程序，但我無法看到它。

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;