Question

当我在“男士”标签中时，我想从产品屏幕转到购物车屏幕。

我的零食代码：https://snack.expo.io/@alirezadarvishi/full-screen-modal-v3

目标：我想进入“购物车屏幕” ，当我点击“男士”标签中的购物车屏幕按钮时。

主要路线：

const AppNavigatorLoggedin = createStackNavigator({
    Home: {
      screen: HomeScreen,
      navigationOptions: () => ({
        header: null,
      }),
    },
    Products: {
      screen: ProductsShow,
      navigationOptions: () => ({
        header: null,
      }),
    },
    Cart: {
      screen: CartScreen,
      navigationOptions: () => ({
        header: null,
      }),
    },
  }, {
      initialRouteName: 'Home',
      mode: 'modal',
      headerMode: 'none',
  });

标签路线：

const MenStack = createStackNavigator({
  menStackNav: { screen: MenTabScreen,    navigationOptions:{tabBarVisible: false},
},
  Products: {
    screen: ProductsShow,
    navigationOptions:{tabBarVisible: false},
  }
},{
  initialRouteName: 'menStackNav',
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
});

MenStack.navigationOptions = ({navigation}) => {
      let tabBarVisible = true;
      if(navigation.state.index > 0){
        tabBarVisible = false;
      }

      return {
        tabBarVisible,
      }
}


const WomenStack = createStackNavigator({
  WomenStacknav: { screen: WomenTabScreen,    navigationOptions:{tabBarVisible: false},
},
  Products: {
    screen: ProductsShow,
    navigationOptions:{tabBarVisible: false},
  }
},{
  initialRouteName: 'WomenStacknav',
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
});

WomenStack.navigationOptions = ({navigation}) => {
      let tabBarVisible = true;
      if(navigation.state.index > 0){
        tabBarVisible = false;
      }

      return {
        tabBarVisible,
      }
}


const HomeScreenTabs = createMaterialTopTabNavigator({
  Women: {
    screen:WomenStack,
  },
  Men: {
    screen:MenStack,
  },

},{
    initialRouteName: 'Men',
    mode: 'modal',
    headerMode: 'none',
});

男士标签页：

    <View style={{marginTop:100}}>
      <Button onPress={()=>{this.props.navigation.navigate('Products' , )}} title="product screen"/>
    </View>

产品屏幕：

<View style={{marginTop:100}}>
      <Button title="Cart screen" onPress={() => {
                        this.props.navigation.dispatch(StackActions.reset({
                          index: 0,
                          actions: [
                            NavigationActions.navigate({ routeName: 'Cart' })
                          ],
                        }))
                      }} />
  </View>

现在，当我单击按钮不起作用时，我看到错误。

错误：没有为购物车定义任何路线。必须是以下之一： 'menStackNav'，'产品'

为什么不工作？我该如何解决？

Answer 1

在MenStack中添加购物车屏幕（tabsShow.js），以便在该路径/路径中访问它。对于基本路由，您可以执行以下操作：-

    import CartScreen from './cart';

const MenStack = createStackNavigator({
  menStackNav: { screen: MenTabScreen,    navigationOptions:{tabBarVisible: false},
},
  Products: {
    screen: ProductsShow,
    navigationOptions:{tabBarVisible: false},
  },
    Cart: {
      screen: CartScreen,
      navigationOptions: () => ({
        header: null,
      }),
    },
},{
  initialRouteName: 'menStackNav',
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
});

如果要在每个屏幕上看到topNavigationBar，可以通过以下方式传递导航：

  import CartScreen from './cart';

const MenStack = createStackNavigator({
  menStackNav: { screen: MenTabScreen,    navigationOptions:{tabBarVisible: false},
},
  Products: {
    screen: ProductsShow,
    navigationOptions:{tabBarVisible: false},
  },
  Cart: {
      screen: CartScreen,
      navigationOptions: (navigation) => ({
        header: HomeScreenTabs,
      }),
    },
},{
  initialRouteName: 'menStackNav',
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
});

尝试为整个项目创建一个路由文件，这将使您容易理解应用程序流程。

'''

import React, { Component } from 'react';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions, createMaterialTopTabNavigator } from 'react-navigation';
import HomeScreen from './home';
import ProductsShow from './product';
import CartScreen from './cart';

import WomenTabScreen from './women';
import MenTabScreen from './men';

const MenStack = createStackNavigator({
  menStackNav: { screen: MenTabScreen,    navigationOptions:{tabBarVisible: false},
},
  Products: {
    screen: ProductsShow,
    navigationOptions:{tabBarVisible: false},
  },
  CartIs: {
      screen: CartScreen,
      navigationOptions: (navigation) => ({
        header: HomeScreenTabs,
      }),
    },
},{
  initialRouteName: 'menStackNav',
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
});
MenStack.navigationOptions = ({navigation}) => {
      let tabBarVisible = true;
      if(navigation.state.index > 0){
        tabBarVisible = false;
      }

      return {
        tabBarVisible,
      }
}


const WomenStack = createStackNavigator({
  WomenStacknav: { screen: WomenTabScreen,    navigationOptions:{tabBarVisible: false},
},
  Products: {
    screen: ProductsShow,
    navigationOptions:{tabBarVisible: false},
  }
},{
  initialRouteName: 'WomenStacknav',
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
});

WomenStack.navigationOptions = ({navigation}) => {
      let tabBarVisible = true;
      if(navigation.state.index > 0){
        tabBarVisible = false;
      }

      return {
        tabBarVisible,
      }
}

const HomeScreenTabs = createMaterialTopTabNavigator({
  Women: {
    screen:WomenStack,
  },
  Men: {
    screen:MenStack,
  },

},{
  tabBarOptions: {
    style:{backgroundColor:'#000'},
    activeTintColor: '#4facfe',
    inactiveTintColor: '#9ed2ff',
    indicatorStyle: {
      opacity: 0
    },
    tabStyle:{backgroundColor:'#000',height:40,borderBottomColor:'#000',paddingTop:70,paddingBottom:20},
    labelStyle: {
      borderBottomColor:'#000',
        fontSize: 14,
      },
  },
    initialRouteName: 'Men',
    mode: 'modal',
    headerMode: 'none',
});

 const AppNavigatorLoggedin = createStackNavigator({
    Home: {
      screen: HomeScreenTabs,
      navigationOptions: () => ({
        header: null,
      }),
    },
    Products: {
      screen: ProductsShow,
      navigationOptions: () => ({
        header: null,
      }),
    },
    Cart: {
      screen: CartScreen,
      navigationOptions: () => ({
        header: null,
      }),
    },
  }, {
      initialRouteName: 'Home',
      mode: 'modal',
      headerMode: 'none',
  });



const RootAppNavigatorLoggedin = createAppContainer(AppNavigatorLoggedin);
export default RootAppNavigatorLoggedin;


now you can remove home.js

如果路径中不存在，如何更改画面？（反应导航）

1 个答案:

如果路径中不存在，如何更改画面？ （反应导航）

1 个答案:

如果路径中不存在，如何更改画面？（反应导航）