Question

我正在制作一个应用程序，其中我使用了Drawer Navigator并在其中嵌套了一个Stack Navigator。抽屉包含屏幕HOME，PRODUCTS，Profile等。虽然我在主屏幕内使用Stack导航器切换到3个不同的屏幕产品 - ＆gt; ItemDescription。问题1：如果我通过主页进入产品或项目说明。如果我打开产品中的抽屉或ItemDescription，我不能回到家里从抽屉单击HOME .WHile点击抽屉菜单上的其他选项我可以切换到差异屏幕。

问题2：我有一个来自导航栏＆＃39;的导航栏。，我在每个组件中使用，即HOME，PRODUCTS，ItemDescription，Cart等。你能帮我链接还原，以便我可以点击其ICON即CART和SEARCH屏幕打开不同的屏幕。

抽屉代码：

 const RootDrawer = DrawerNavigator({
 Home: {
   screen: HomeScreen,
   style :{backgroundColor:'blue'},
 },
 Profile: {
   screen: ProfileScreen,
 },
 Products: {
   screen: Products,
 },
 Cart: {
   screen: Cart,
 },
});

export default RootDrawer;

HomeScreenCode：

 class Home extends React.Component {

      constructor(props){
        super(props) ;
        this.openUp = this.openUp.bind(this)

      }

      openUp(){
         this.props.navigation.navigate('DrawerOpen'); 
    // open drawer passed to all components to open Drawer from hamburger 
    //iconpresent at NAVbar
       }



      render() {
            return (
                  <SimpleApp key={1} screenProps={this.openUp} />
         );
      }
    }




const SimpleApp = StackNavigator(
   {
  drwlyout: { screen: DrawerLayoutMain ,      navigationOptions:({navigation}) => ({ header: false }  )              },
  prodlyout: { screen: Products ,    navigationOptions:({navigation}) => ({ header: false })},
  itemdsclyout: { screen: ItemDescription ,    navigationOptions:({navigation}) => ({ header: false })},
  navbarlayout: { screen: NavBarComponent ,    navigationOptions:({navigation}) => ({ header: false })},


  }   );

function mapDispatchtoProps(dispatch){
   return  bindActionCreators({getDataFirebase:getDataFirebase},dispatch);
}
export default connect(null,mapDispatchtoProps)(Home);

Answer 1

对于您的第一个问题，您将需要一个导航缩减器，可以找到有关如何使用React-Navigation实现Redux的基本说明here 当您必须侦听减速器内部的特定导航操作时。例如，您的DrawerNavigator看起来像这样：

const nav = (state = INITIAL_NAV_STATE, action) => {
let nextState;

switch (action.type) {

  case REHYDRATE:
    // if you're using redux-persist

  case 'Main': // where 'Main' is your StackNavigator
    nextState = AppNavigator.router.getStateForAction(
      NavigationActions.navigate({ routeName: 'Home' }),
      state
    );
    break;

请参阅“ routeName ”，这是主屏幕的名称。因此，您的根或主抽屉导航器应如下所示：

const routeConfig = {
  Main: {
    screen: MainStackNavigator,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (
        <Icon name="a006_start" size={28} color={tintColor} />
      ),
    drawerLockMode: 'locked-closed'
  }
},

.... additional Code ....
.... like navigationOptions etc. ....

const MainDrawerNavigator = DrawerNavigator(routeConfig, routeOptions);

export default MainDrawerNavigator;

对不起，我还没有使用'navbar-native'，但我想如果你正在连接你的redux配置，你可以听取特定的导航动作。然后可以在导航减速器内处理。

反应原生导航

1 个答案: