Question

我正在使用以下技术开发移动应用程序。 -反应本机 -基于本机的（尤其是Drawer组件） -反应本机路由器通量而且我有一个问题。

我的应用程序左侧有Drawer，单击标题上的图标时，可以从屏幕的左侧显示它。但是，向后滑动时，可以看到Drawer组件，但看不到Drawer，就像一个屏幕附着在左侧。

此链接是再现我问题的GIF动画。 https://gyazo.com/a9109844199bae04f898431edbeaddbc

这些是我的代码。

DrawerComponent

import React, { Component } from 'react';
import { Drawer, Hdeader, Left, Icon } from 'native-base';
import SidebarContainer from '../component/SidebarConmponent';

:
export default class DrawerComponent extends Component {

:
render() {
    return (
      <Drawer
        ref={(ref) => { this.drawer = ref; }}
        content={<SidebarComponent navigator={this._navigator} userId={this.props.userId} firebase={this.props.firebase}/>}
        openDrawerOffset={0.4}
        tapToClose={true}
        onClose={() => this.closeDrawer}
        onOpen={() => this.openDrawer}
        styles={{ height: 100 }}
        side={'left'}
        type={'overlay'}
      >
<Header style={{ backgroundColor: 'transparent' }}>
            <Left style={{ flexDirection: 'row'}}>
              <Icon onPress={this.openDrawer.bind(this)} type='MaterialIcons' name='menu' style={{ color: 'white', justifyContent: 'center' }} />
            </Left>
{this.props.children}
</Drawer>
:

SiderbarComponent

:
import React, { Component } from 'react';
import { Container, Content, Header, Left, Icon, List, ListItem } from 'native-base';

export default class SidebarContainer extends Component {
:
  render() {
    return (
      <Container>
          <View style={{ height: height }}>
            <Content>
              <List>
                <ListItem button>
                  <Icon type='Ionicons' name='md-home' />
                  <Text style={{ paddingLeft: 10 }}Home</Text>
                </ListItem>
              </List>
            </Content>
          </View>
        </Container>
    )
  }
}

HomeComponent

import React, { Component } from 'react';
import { Text } from 'react-native';
import DrawerComponent from '../component/DrawerComponent';

export default class HomeComponent extends Component {
  render(
    return (
      <DrawerComponent>
        <Text>Home</Text>
      </DrawerComponent>
    )
  )
}

Answer 1

Home组件从错误扩展。需要从组件导入扩展像这样尝试

import React from 'react'
import { Text } from 'react-native';

import DrawerComponent from '../component/DrawerComponent';

export default class Home extends React.Component  {
 render(){
  return (
   <DrawerComponent>
     <Text>Home</Text>
   </DrawerComponent>
        )
     }
 }

向后滑动时可以看到抽屉

1 个答案: