Question

我想在我的React Native应用程序中使用React Navigation，但是我不确定如何获得此特定功能： here，其中有一个底部标签导航器，并且在每个标签屏幕中，标题中都有一个菜单按钮，用于打开一个抽屉式导航器，并且抽屉式导航器中的每个选项都可以打开一个堆栈导航器（对于所有选项卡，即“主页”选项卡“为您”按钮打开的“与您在一起”屏幕与“在一起”选项卡完全相同，依此类推。我尝试了stackNavigator，抽屉导航器和bottomTabNavigator的各种组合，但是没有一种表现出明智的方式，或者至少以我想要的方式表现出来。我已经做了一个基本的bottomTabNavigator，但是我不知道将抽屉导航器放在哪里；

defaultConfig {
    // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
    applicationId "<YOUR_APP_ID>"
    minSdkVersion 21
    targetSdkVersion 28
    versionCode 2     // Manually add your desired version code
    versionName "1.0.1"      // Manually add your desired version name
//        versionCode flutterVersionCode.toInteger()
//        versionName flutterVersionName
    testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}

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

小吃链接：https://snack.expo.io/@mehran.khan/3d6749（请在Android / IOS中检查）

复杂的React导航状态

1 个答案: