Question

我正在尝试创建一个新应用。我已经创建了侧面菜单。但是如果我在同一个屏幕中，侧面菜单抽屉不起作用，例如在屏幕截图中我已经在主屏幕中。现在，如果我单击侧面菜单中的主页，则不会执行任何操作。现在，侧面菜单又覆盖了整个屏幕的高度。我想在标题和底部标签导航器之间显示。请帮助我image

const DashboardTabNavigator = createBottomTabNavigator( {
    Home: HomeScreen,
	WebMenu: WebMenuScreen,
    Settings: SettingsScreen,
  },
  {    
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
	  labelStyle: {
		fontSize: 15
	  },
	  tabStyle: {
    justifyContent: 'center'
  },
  showIcon: false
	  
    },
  });

//MenuDrawer
export class MenuDrawer extends React.Component {

gotoHome = () => {
  this.props.navigation.navigate('Home');
}

gotoWebMenu = () => {
  this.props.navigation.navigate('WebMenu');
}

gotoSettings = () => {
  this.props.navigation.navigate('Settings');
}

  render() {
      return(
       <View style = {styles.container}>        
        <Text onPress={this.gotoHome} style = {styles.item} ><Ionicons name="md-home" size={20} />  Home</Text>
        <Text onPress={this.gotoWebMenu} style = {styles.item} ><Ionicons name="logo-rss" size={20} />  Web Menu</Text>
        <Text onPress={this.gotoSettings} style = {styles.item} ><Ionicons name="md-settings" size={20} />  Settings</Text>
      </View>
      )
  }
 
}

//side menu 
const MyApp = createDrawerNavigator({
  Menu: {
    screen: DashboardTabNavigator,
  },
}, 
	{	
	contentComponent: MenuDrawer,    
	drawerPosition: 'right',
	drawerWidth:width - width/2
	},
  {
  initialRouteName: 'Login'
});


//screen route
const LoginStack = createStackNavigator({

  Login: {
    screen: Login
  },
  Home:{ screen: MyApp},
}, {
  initialRouteName: 'Login',
   headerMode: 'null'
});


 
const MyApp1 = createAppContainer(LoginStack);

Answer 1

尝试一下。

class NavigationDrawerStructure extends Component {

  toggleDrawer = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          <Image
            source={require('../Img/hamburger.png')}
            style={{ width: 25, height: 25, marginLeft: 20, tintColor: '#ffffff' }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

然后以这种方式使用

const HomeActivity_StackNavigator = createStackNavigator({

  Home: {
    screen: Main,
    navigationOptions: ({ navigation }) => ({
      title: 'Dashboard',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800'
      },
      headerTintColor: '#fff'
    }),
  },
}, {headerLayoutPreset: 'center'});

如何在React Native中切换侧边菜单栏？

1 个答案: