React Native原生Drawer求助：抽屉不全屏及标题栏代码拆分

嘿，我来帮你搞定这两个问题！咱们一个一个来拆解：

一、让抽屉占满整个屏幕 #

你现在的抽屉没法全屏，问题出在外层包裹的<View>上——你给它设置了height: 100，直接把Drawer的高度限制死了。只要把这个外层View的样式改成flex: 1，让它自动占满整个屏幕空间，抽屉就能从顶部到底部覆盖全屏了。

修改后的核心代码片段：

return (
  <View style={{ flex: 1, backgroundColor: 'rgb(240,240,240)' }}> {/* 替换height:100为flex:1 */}
    <DrawerLayoutAndroid
      drawerWidth={200}
      ref={'DRAWER'}
      drawerBackgroundColor="rgba(0,0,0,0.5)"
      drawerPosition={DrawerLayoutAndroid.positions.Left}
      renderNavigationView={() => navigationView}>
      {/* 标题栏内容保持不变 */}
    </DrawerLayoutAndroid>
  </View>
);

这样修改后，DrawerLayoutAndroid就能依托外层的全屏View，让抽屉正常显示为全屏状态。

二、拆分标题栏代码，实现组件化 #

把标题栏和Home组件混写确实不够规范，咱们可以把标题栏抽成独立组件，这样代码结构更清晰，后续修改或复用也更方便。

步骤1：创建独立的Header组件 #

可以新建一个HeaderComponent.js文件（或者直接在当前文件内定义），把标题栏的UI和逻辑封装进去，通过props传递需要的回调和状态：

import React from 'react';
import { View, Picker, Alert } from 'react-native';
import { Icon} from '@shoutem/ui'

const HeaderComponent = ({ onDrawerPress, selectedCategory, onCategoryChange }) => {
  return (
    <View style={{ flex: 1, alignItems: 'flex-start', flexDirection: 'row' }}>
      <Icon 
        onPress={onDrawerPress} 
        style={{ flex: 0.1, marginTop: 2, marginLeft: 2 }} 
        name="sidebar" 
      />
      <View style={{ flex: 0.25 }}></View>
      <Picker 
        style={{ flex: 0.3, marginTop: -10, backgroundColor: 'green' }} 
        selectedValue={selectedCategory} 
        onValueChange={onCategoryChange}
      >
        <Picker.Item label="Patient" value="patient" />
        <Picker.Item label="Student" value="student" />
      </Picker>
      <View style={{ flex: 0.25 }}></View>
      <Icon 
        onPress={() => Alert.alert('Title', 'Long Message')} 
        style={{ marginTop: 2, marginRight: 2, flex: 0.1 }} 
        name="add-friend" 
      />
    </View>
  );
};

export default HeaderComponent;

步骤2：在Home组件中使用HeaderComponent #

回到Home组件，引入这个Header组件，把需要的状态和回调通过props传递过去：

import React, { Component } from 'react';
import { View, DrawerLayoutAndroid, Text } from 'react-native';
import HeaderComponent from './HeaderComponent'; // 引入封装好的组件
import { Icon} from '@shoutem/ui'

export default class Home extends Component {
  constructor(props) {
    super(props);
    // 补充初始化Picker的状态（你之前的代码里漏掉了，会导致报错）
    this.state = {
      selectedCategory: 'patient'
    };
  }

  openDrawer() {
    this.refs['DRAWER'].openDrawer()
  }

  render() {
    const navigationView = (
      <View style={{ flex: 1, backgroundColor: '#fff' }}>
        <Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>I'm in the Drawer!</Text>
      </View>
    );

    return (
      <View style={{ flex: 1, backgroundColor: 'rgb(240,240,240)' }}>
        <DrawerLayoutAndroid
          drawerWidth={200}
          ref={'DRAWER'}
          drawerBackgroundColor="rgba(0,0,0,0.5)"
          drawerPosition={DrawerLayoutAndroid.positions.Left}
          renderNavigationView={() => navigationView}>
          {/* 使用封装好的Header组件，传递所需props */}
          <HeaderComponent
            onDrawerPress={() => this.openDrawer()}
            selectedCategory={this.state.selectedCategory}
            onCategoryChange={(itemValue) => this.setState({ selectedCategory: itemValue })}
          />
        </DrawerLayoutAndroid>
      </View>
    );
  }
}

额外提醒：你之前的代码里没有初始化selectedCategory状态，这会导致Picker运行时报错，我已经在Home组件的constructor里补上了，记得保留哦！

内容的提问来源于stack exchange，提问作者Code Guru