Question

我已经开始反应原生。我正在使用react本机组件创建一个抽屉，只需单击标题栏中的按钮即可打开该抽屉。

但抽屉没有在整个屏幕上打开。这是代码

import React, { Component } from 'react';

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

export default class Home extends Component {
  constructor(props) {
    super(props);
    }

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

    var 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={{ height: 100, backgroundColor: 'rgb(240,240,240)' }}>
        <DrawerLayoutAndroid
          drawerWidth={200}
          ref={'DRAWER'}
          drawerBackgroundColor="rgba(0,0,0,0.5)"
          drawerPosition={DrawerLayoutAndroid.positions.Left}
          renderNavigationView={() => navigationView}>
          {
            <View style={{ flex: 1, alignItems: 'flex-start', flexDirection: 'row' }}>

              <Icon onPress={() => {
                this.openDrawer();
              }} 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={this.state.selectedCategory}
                onValueChange={(itemValue, itemIndex) => this.setState({ selectedCategory: itemValue })}>
                <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>
          }
        </DrawerLayoutAndroid>
      </View>
    );
  }
}

这是视图

我该如何解决这个问题？而且我已经在标题栏中写了整个代码，我猜这不是正确的方法，怎么能出标题条码？如果这个问题太基础，请忽略。

Answer 1

您的抽屉采用其父组件的高度（此处为<View/>）。当您将父<View/>的高度设置为100时，您的抽屉具有相同的高度。

以下是React-Native documentation中的示例：

<DrawerLayoutAndroid
    drawerWidth={300}
    drawerPosition={DrawerLayoutAndroid.positions.Left}
    renderNavigationView={() => navigatenter code hereionView}>
    <View style={{flex: 1, alignItems: 'center'}}>
    </View>
</DrawerLayoutAndroid>

如何使用原生抽屉反应原生

1 个答案: