WIX React Native Navigation：堆栈中的第二个屏幕显示在第一个屏幕之上答案

【问题标题】：WIX React Native Navigation: Second screen in stack displays over the first oneWIX React Native Navigation：堆栈中的第二个屏幕显示在第一个屏幕之上
【发布时间】：2019-09-11 05:07:19
【问题描述】：

我的 RN 应用中有一个基于 WIX React Native Navigation 的导航。我在应用程序中有两个选项卡。在第一个“设置”屏幕中呈现在“登录”屏幕上，一旦应用程序启动。如果我只想显示“登录”并从它 onClick 导航到“设置”，如何解决？

export const goToAuth = () =>
  Navigation.setRoot({
    root: {
      bottomTabs: {
        children: [
          {
            stack: {
              children: [
                {
                  component: {
                    name: 'Login',
                    options: {
                      bottomTab: {
                        text: 'Tab One',
                      },
                      topBar: {
                        title: {
                          text: 'Tab One',
                        },
                      },
                    },
                  },
                },
                {
                  component: {
                    name: 'Settings',
                    options: {
                      topBar: {
                        title: {
                          text: 'Tab Two',
                        },
                      },
                    },
                  },
                },
              ],
              options: {
                bottomTab: {
                  text: 'Tab 1',
                },
              },
            },
          },
          {
            component: {
              name: 'PinCode',
              options: {
                bottomTab: {
                  text: 'Tab 2',
                },
              },
            },
          },
        ],
      },
    },
  });

【问题讨论】：

标签： react-native wix-react-native-navigation

【解决方案1】：

从堆栈中移除设置组件，您的子数组应该只有登录组件，并在需要时以编程方式从登录屏幕推送设置屏幕。

Navigation.push(this.props.componentId, {
  component: {
    name: 'Settings',
    options: {
      topBar: {
        title: {
          text: 'Settings screen'
        }
      }
    }
  }
});

这将为您提供所需的行为。

【讨论】：