Встроенная навигация WIX React: второй экран в стеке отображается поверх первого

#react-native #wix-react-native-navigation

#react-native #wix-react-native-navigation

Вопрос:

В моем приложении RN есть навигация, основанная на встроенной навигации WIX React. У меня есть две вкладки в приложении. В первом случае экран «Настройки» отображается поверх экрана «Вход» после запуска приложения. Как это можно решить, если я хочу показать только «Login» и из него 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',
                },
              },
            },
          },
        ],
      },
    },
  });
  

Ответ №1:

Удалите компонент настроек из стека, в вашем дочернем массиве должен быть только компонент входа в систему, и при необходимости программно нажмите экран настроек с экрана входа в систему.

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

Это даст вам желаемое поведение.