Сложные реактивные состояния навигации

Question

Я хочу использовать React Navigation в своем приложении React Native, но я не уверен, как получить эту конкретную функциональность: Демонстрация от Samsung Health , где есть навигатор в нижней вкладке, и в каждомНа экране вкладки есть кнопка меню в заголовке, которая открывает навигатор ящиков, и каждый параметр в навигаторе ящиков открывает навигатор стека (который одинаков для всех вкладок, т. е. на вкладке «Главная» кнопка «Для вас» открывает одинаково »). Для вас "экран как вкладка" Вместе "и т. Д.)

Я пробовал различные комбинации stackNavigator, boxNavigator и bottomTabNavigator, но ни один из них не ведет себя разумно или, по крайней мере, так, как я хотел. Я сделал базовый bottomTabNavigator, но я не знаю, куда поместить туда bottomNavigator;

const HomeStack = createStackNavigator({
  Home: HomeScreen
});
const NotifyStack = createStackNavigator({
  Notify: NotifyScreen
});
const ProfileStack = createStackNavigator({
  Profile: ProfileScreen
});
const SettingsStack = createStackNavigator({
  Settings: SettingsScreen
});

const DrawerStack1 = createStackNavigator({
  DrawerStack: DrawerScreen1
});
const DrawerStack2= createStackNavigator({
  DrawerStack: DrawerScreen2
});
const DrawerStack3 = createStackNavigator({
  DrawerStack: DrawerScreen3
});


const Drawer = createDrawerNavigator({
  DrawerStack1,
  DrawerStack2,
  DrawerStack3
});

const AppBottomTabs = createMaterialBottomTabNavigator({
  Home: HomeStack,
  Notify: NotifyStack,
  Profile: ProfileStack,
  Settings: SettingsStack
});

Answer 1

Я создал образец проекта для вас, который имеет 3 вкладки и ящик на каждой вкладке. У ящика есть опции (Events, ForYou), которые открывают отдельный экран

Приложение Demo

Полный пример кода

import React from 'react';
import {View, Text, Image, TouchableOpacity} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createDrawerNavigator} from 'react-navigation-drawer';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';

/*
Components
*/
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class Together extends React.Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Together</Text>
      </View>
    );
  }
}

class Discover extends React.Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Discover</Text>
      </View>
    );
  }
}

class Events extends React.Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Events</Text>
      </View>
    );
  }
}

class ForYou extends React.Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>ForYou</Text>
      </View>
    );
  }
}

class DrawerComponent extends React.Component {
  drawerOptions = [
    {title: 'For you', route: 'ForYou'},
    {title: 'Events', route: 'Events'},
  ];

  render() {
    return (
      <View style={{flex: 1, marginTop: 60}}>
        {this.drawerOptions.map(item => (
          <TouchableOpacity
            style={{padding: 16}}
            onPress={() => {
              this.props.navigation.toggleDrawer();
              this.props.navigation.navigate(item.route);
            }}
            key={item.title}>
            <Text>{item.title}</Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  }
}

/*
Navigator
*/
const TabNavigator = createStackNavigator(
  {
    TabsStack: {
      screen: createBottomTabNavigator({
        HomeScreen,
        Together,
        Discover,
      }),
    },
  },
  {
    defaultNavigationOptions: ({navigation}) => ({
      title: 'SamSung Health',
      headerLeft: (
        <TouchableOpacity
          style={{padding: 16}}
          onPress={() => navigation.toggleDrawer()}>
          <Image
            source={require('./drawer.png')}
            style={{width: 30, height: 30}}
          />
        </TouchableOpacity>
      ),
    }),
  },
);

const DrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: TabNavigator,
    },
  },
  {drawerType: 'slide', contentComponent: DrawerComponent},
);

DrawerNavigator.navigationOptions = {
  header: null,
};

const AppNavigator = createStackNavigator({
  Home: {
    screen: DrawerNavigator,
  },
  Events,
  ForYou,
});

const AppContainer = createAppContainer(AppNavigator);

// render App Component
export default class App extends React.Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <AppContainer />
      </View>
    );
  }
}

Закусочная ссылка: https://snack.expo.io/@mehran.khan/3d6749 (проверьте в Android / IOS)