Создание навигации по вкладкам + ящикам в React-Native - PullRequest
Новая
       73

Создание навигации по вкладкам + ящикам в React-Native

0 голосов
/ 24 марта 2020

У меня есть вопрос по поводу навигации React-Native. Я хотел бы иметь нижнюю вкладку, которая имеет 3 основных пункта (Дом, Новости, Меню). Эта вкладка должна быть видна везде в приложении. При щелчке по вкладке «Меню» следует открыть представление ящика с другим экраном для навигации («Настройки», «Сведения об учетной записи» и т. Д. c, а также «Дом и новости»). Когда пользователь выбирает, например, «Настройки», должен открываться экран «Настройки», но в нижней панели элемент меню должен отображаться как активный. До сих пор я был в состоянии создать вкладку навигации и ящик, который открывается при нажатии вкладки элемента. Однако проблема заключается в следующем: если пользователи нажимают «Настройки» в ящике, нижняя вкладка больше не отображается. Можно ли как-то этого добиться? 

const MainTabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: HomeNavigator,
    },
    News: {
      screen: NewsNavigator,
    },
    Menu: {
      screen: MenuNavigator,
      navigationOptions: ({navigation}) => ({
                  tabBarOnPress: () => {navigation.openDrawer()},
              }),
    },
  },
  {
    initialRouteName: 'Home',
  },
);

const MainDrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: MainTabNavigator,
    },
    News: {
      screen: NewsNavigator,
    },
    Settings: {
      screen: SettingsNavigator,
    },
    AccountDetails: {
      screen:AccountDetailsNavigator,
    },
  },
  {
    tabBarOptions: {showLabel: false},
    initialRouteName: 'Home',
  },
);

const AppNavigator = createSwitchNavigator(
  {
    Auth: LoginNavigator,
    Main: {
      screen: MainDrawerNavigator,
    },
  },
  {
    transition: (
      <Transition.Together>
        <Transition.Out
          type="slide-bottom"
          durationMs={400}
          interpolation="easeIn"
        />
        <Transition.In type="fade" durationMs={500} />
      </Transition.Together>
    ),
  },
);

export default AppNavigator;

А в приложении. js: 

const AppContainer = createAppContainer(AppNavigator);

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <AppContainer />;
  }
}

export default App;
...