首页 文章

使用react-navigation从 Headers 图标切换抽屉

提问于
浏览
0

我是反应原生和反应导航的新手 . 必需屏幕:带有 Headers (缩略图 Headers )的主页,两个选项卡和一个抽屉,用于切换缩略图的onPress .

请检查我的代码:

import React, { Component } from 'react';
import { Platform,  StyleSheet,  Text, View, TouchableOpacity} from 'react-native';
import {Icon, Button} from 'native-base';
const util = require('util');
import { TabNavigator, StackNavigator, DrawerNavigator, NavigationActions } from 'react-navigation';
import FirstScreen from './tabs/FirstScreen';
import SecondScreen from './tabs/SecondScreen';
import Profile from './Profile';
import SearchScreen from './tabs/SearchScreen';

const DrawerScreens = DrawerNavigator({
    Profile: {screen: Profile}
},{
    drawerPosition: 'left',
    drawerWidth: 150
});

// A drawer navigator

 const TabScreens= TabNavigator({
    First: {screen: FirstScreen},
    Second: {screen: SecondScreen}
  }); 

//   Started with a tab navigator to register two tabs

  const MenuButton =({navigation})=>{
   return(
        <View>        
        <TouchableOpacity onPress={()=>(navigation.navigate('DrawerToggle'))}>
            <Icon name="person" size= {20}/>
        </TouchableOpacity>
      </View>)};

export const StackScreens= StackNavigator({
    Draw: {screen: DrawerScreens},
    // Drawer navigator as a screen
    Display: {screen: TabScreens, 
        // Making the tabnavigator as a screen
        navigationOptions: ({navigation})=>({
        title: 'Welcome',
        headerLeft: <MenuButton navigation={navigation} />
      })
    },

},{
    initialRouteName: 'Display'
});

按下缩略图时,TabScreens导航到DrawerScreens(因为这是我编码的方式) . 我想让它切换 . 有人可以帮帮我吗 .

1 回答

  • 0

    以下是关于how to structure your navigator properly.的一些一般性想法

    您使用的是什么 react-navigation 版本?

    尝试将 MenuButton 辅助方法更改为此方法,看看它是否有帮助

    if (navigation.state.index === 0) {
        navigation.navigate('DrawerOpen')
      } else {
        navigation.navigate('DrawerClose')
      }
    

相关问题