复杂的 React 导航状态

Question

我想在我的 React Native 应用程序中使用 React Navigation，但我不确定如何获得此特定功能： Demo from Samsung Health，其中有一个底部选项卡导航器，并且在每个选项卡屏幕中，header 中有一个打开抽屉导航器的菜单按钮，抽屉导航器中的每个选项都会打开一个堆栈导航器（其中对于所有选项卡都是相同的，即主页选项卡 "For you" 按钮打开与 Together 选项卡完全相同的 "For you" 屏幕等等）

我已经尝试了 stackNavigator、drawerNavigator 和 bottomTabNavigator 的各种组合，但 none 以合理的方式运行，或者至少以我想要的方式运行。我做了一个基本的 bottomTabNavigator，但我不知道把 drawerNavigator 放在哪里；

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 个选项卡和每个选项卡中的抽屉。抽屉有选项（事件，ForYou）将打开单独的屏幕

应用演示

完整示例代码

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>
    );
  }
}

小吃Link：https://snack.expo.io/@mehran.khan/3d6749（请打卡Android/IOS）

复杂的 React 导航状态

Complex React Navigation states

navigation

navigation-drawer

react-native

react-navigation