중첩 된 네비게이터에서 반응 탐색 변경 활성 탭

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;