ネストされたナビゲータから反応ナビゲーション変更のアクティブなタブ

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;