反应本机导航向导屏幕问题

时间:2019-02-21 07:54:43

标签: react-native wix-react-native-navigation

我用WIX创建了一个基于选项卡的导航,每次我尝试从选项卡的任何屏幕中推送一个屏幕时,它什么都不会做,但是,当我尝试从第一个选项卡中进行推送时,它却可以工作,我无法从其他标签中按下

Promise.all(iconTabs).then(sources => { // after the promises end
        Navigation.setRoot({
            root: {
                bottomTabs: {
                    children: [{
                        stack: {
                            children: [{
                                component: { // 1
                                    name: screenNames['listInvoice'].name,
                                }
                            }],
                            options: {
                                bottomTab: {
                                    text: screenNames['listInvoice'].title,
                                    icon: sources[0],
                                    selectedIconColor: DEFAULT_COLOR,
                                },
                                topBar: getTopBar()
                            }
                        }
                    },
                        {
                            component: { // 2
                                name: screenNames['listReceipt'].name,
                                options: {
                                    bottomTab: {
                                        text:  screenNames['listReceipt'].title,
                                        icon: sources[1],
                                        selectedIconColor: DEFAULT_COLOR,

                                    },
                                    topBar: getTopBar()

                                }
                            } ,
                        },
                        {
                            component: { // 2
                                name: screenNames['listCustomer'].name,
                                options: {
                                    bottomTab: {
                                        text:  screenNames['listCustomer'].title,
                                        icon: sources[2],
                                        selectedIconColor: DEFAULT_COLOR,

                                    },
                                    topBar: getTopBar()

                                }
                            } ,
                        },
                        {
                            component: { // 2
                                name: screenNames['listInvoiceItem'].name,
                                options: {
                                    bottomTab: {
                                        text:  screenNames['listInvoiceItem'].title,
                                        icon: sources[3],
                                        selectedIconColor: DEFAULT_COLOR,

                                    },
                                    topBar: getTopBar()

                                }
                            } ,
                        },
                        {
                            component: { // 2
                                name: screenNames['listSupplier'].name,
                                options: {
                                    bottomTab: {
                                        text:  screenNames['listSupplier'].title,
                                        icon: sources[4],
                                        selectedIconColor: DEFAULT_COLOR,

                                    },
                                    topBar: getTopBar()
                                }
                            } ,
                        },
                    ]
                }
            }
        });
    });
                                                    -->
Navigation.push(currentScreen, {
            component: {
                name: screenName,
                options: {
                    topBar: getTopBar(),
                    bottomTabs: {
                        visible: false,
                        drawBehind: true
                    }
                }
            }
        });

->

环境

  • React Native Navigation版本:最新版本 react-native-cli:2.0.1 反应本机:0.58.4
  • 平台Android

1 个答案:

答案 0 :(得分:1)

我有同样的问题。 您还必须启动其他选项卡的堆栈布局。喜欢:

   bottomTabs: {
      children: [
        ........
        {
          stack: {
            children: [
              { 
                component: { screenNames['listReceipt'].name }
              }
            ]
          }
        },
       {
          stack: {
            children: [
              { 
                component: { screenNames['listCustomer'].name }
              }
            ]
          }
        }
      ]
    }

另请参见:https://github.com/wix/react-native-navigation/issues/4786#issuecomment-467648825