javascript - 嵌套在 TabNavigator 中的抽屉

Question

所以我正在使用React-native React-navigation，并且我试图将我的应用程序设置为具有一些流程。

这个想法是嵌套一个抽屉，我可以在选项卡导航器的标题中打开和关闭它。或者同时使用 tabBar 顶部和底部，我不确定这是否可行。

这是我的 Navigator.js

const RootDrawer = DrawerNavigator({
  Leaderboard: {
    screen: Leaderboard,
    navigationOptions: {
      drawerLabel: 'Leaderboard',
      drawerIcon: ({ tintColor, focused }) => (
        <Ionicons
          name={focused ? 'ios-ribbon' : 'ios-ribbon-outline'}
          size={20}
          style={{ color: tintColor }}
        />
      ),
    },
  },
  Achievements: {
    screen: Leaderboard,
    navigationOptions: {
      drawerLabel: 'Achievements',
      drawerIcon: ({ tintColor, focused }) => (
        <Ionicons
          name={focused ? 'ios-trophy' : 'ios-trophy-outline'}
          size={20}
          style={{ color: tintColor }}
        />
      ),
    },
  }
});

// this was if i was going to use top and bottom tabs for experimentation
const TopTabs = TabNavigator(
  {
    Home: { 
      screen: Landing,
      navigationOptions: {
        title: 'Test',
      }
    },
    Settings: { 
      screen: RootDrawer,
      navigationOptions: ({ navigation }) => ({
        headerLeft : <MenuButton navigation={navigation} />
        // headerLeft : <MenuButton navigate={navigation.navigate} />
      })
    },
  },
  {
    navigationOptions: ({ navigation }) => ({
      headerTitleStyle: {
        alignSelf: 'center',
        textAlign: 'center',
      },
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        switch(routeName) {
          case 'Home':
            iconName = 'home';
            break;
          case 'Profile':
            iconName = 'account';
            break;
          case 'Run':
            iconName = 'run';
            break;
          case 'Settings':
            iconName = 'settings';
            break;
        }
        return <MCIcons name={iconName} size={25} color={tintColor} />;
      }
      ,
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'top',
    animationEnabled: false,
    swipeEnabled: false,
  }
);

const BottomTabs = TabNavigator({
    Home: { 
      screen: Landing,
      navigationOptions: {
        title: 'Test',
      }
    },
    Run: { 
      screen: Landing,
      navigationOptions: {
        title: 'Let\'s Run'
      } 
    },
    Profile: { screen: Profile }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        switch(routeName) {
          case 'Home':
            iconName = 'home';
            break;
          case 'Profile':
            iconName = 'account';
            break;
          case 'Run':
            iconName = 'run';
            break;
          case 'Settings':
            iconName = 'settings';
            break;
        }

        return <MCIcons name={iconName} size={25} color={tintColor} />;
      }
      ,
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
  }
);

// Tried to create new item here to create custom header but when I click it it just navigates to the first item in the drawer instead of open / close the drawer
const TabStack = StackNavigator({
  BottomTabs: {
    screen: BottomTabs,
    navigationOptions: ({ navigation }) => ({
      title: "Main",
      headerLeft:(
        <MenuButton navigation={navigation} />
      )
    })
  },
  Drawer: {
    screen: RootDrawer
  }  
});

export const RootNav = StackNavigator({
  WelcomePage: {
    screen: WelcomePage,
    navigationOptions: {
      header: null
    }
  },
  Login: {
    screen: LoginForm,
    navigationOptions: {
      title: 'Login'
    }   
  },
  SignUp: {
    screen: SignUpForm,
    navigationOptions: {
      title: 'Sign Up'
    }
  },
  Tabs: {
    screen: TabStack
  }
});

export default RootNav;

        export default RootNav;

这是我的 MenuButton.js

imports ...

export default class MenuButton extends Component {
    press() {
        // this.props.navigate('DrawerToggle');

        // Work around for broken functionality above. Should eventually be fixed
        if (this.props.navigation.state.index === 0) {
            this.props.navigation.navigate('DrawerOpen')
        } else {
            this.props.navigation.navigate('DrawerClose')
        }
    }
    render() {
      return (
        <TouchableOpacity onPress={this.press.bind(this)}>
            <Icon name="bars" style={{color: 'black', padding: 10, marginLeft:10, fontSize: 20}}/>
        </TouchableOpacity>
      );
    }
}  

因此，我希望每当我位于 BottomTabs TabNavigation 下列出的屏幕上时，我的标题中都能够有一个 MenuButton，这将允许我切换 DrawerNavigation

Answer 1

那么你可以像这样改变你的 MenuButtom:

imports .....

const MenuButton = ({ navigation }) => (

  <TouchableOpacity onPress={() => navigation.navigate('DrawerOpen')}>
    <Icon
      name="bars"
      style....
    />
  </TouchableOpacity>
);

export default MenuButton;

然后在导航器中导入此自定义按钮并创建底部选项卡和抽屉，如下所示:

const BottomTabs = TabNavigator({

 tabs screens.....

},
{
  tab bar options....

})

现在你的抽屉:

export const Drawer = DrawerNavigator({
  Tabs: {
      screen: BottomTabs,
  }
},
{
  navigationOptions: ({navigation}) => ({
    headerLeft: <MenuButton navigation={navigation} />,
  }),
});

现在是你的 RootNav

export const RootNav = StackNavigator({
  Dashboard : {
      screen: Drawer,
  },
});
export default RootNav;

我希望这对您有帮助，我也在这里给您留下一个例子:

Example drawer and tabs