Реагировать на родную базу - боковая панель открывается под экраном - PullRequest
Новая
       40

Реагировать на родную базу - боковая панель открывается под экраном

0 голосов
/ 12 октября 2018

Я два дня пытаюсь заставить боковую панель работать с использованием собственной базы реагирования.

Я использую пример, который я видел на веб-сайте реактивной базы реагирования (https://docs.nativebase.io/Components.html#Drawer)

Боковая панель работает (она открывается). Но над боковой панелью был своего рода модал. Боковая панель не становится белой. Она темнеет, как будто она находится под тем местом, где она должна быть.

Посмотрите на две картинки

enter image description here

enter image description here

Я не знаю, что делать. У кого-нибудь есть идеи, какзаставить работать это боковое меню? Вот код, который я использую

App.js 

import React, { Component } from 'react'
import { Text } from 'react-native'
import { Header, Left, Button, Icon, Right, Body, Title, Drawer } from 'native-base'
import SideBar from './src/components/SideBar'

export default class AppHeader extends Component {
  closeDrawer() {
    this.drawer._root.close()
  }
  openDrawer() {
    this.drawer._root.open()
  }
  render() {
    return (
      <Drawer
       ref={(ref) => { this.drawer = ref; }}
        content={<SideBar />}
        onClose={() => this.closeDrawer()}
      >
        <Header>
          <Left>
            <Button transparent onPress={() => this.openDrawer()}>
              <Icon name="menu" />
            </Button>
          </Left>
          <Body>
            <Title>Title</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon name="bulb" />
            </Button>
          </Right>
        </Header>
      </Drawer>
    )
  }
}
module.exports = AppHeader

SideBar.js 

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

import {Content} from 'native-base';

export default class SideBar extends Component {
  render() {
    return (
          <Content style={{backgroundColor:'#FFFFFF'}}>
            <Text>Side Bar</Text>
          </Content>
    );
  }
}

module.exports = SideBar;

1 Ответ

0 голосов
/ 15 октября 2018

попробуйте вставить тег Container в Sidebar.class: 

export default class SideBar extends Component {
  render() {
    return (
        <Container>
          <Content style={{backgroundColor:'#FFFFFF'}}>
            <Text>Side Bar</Text>
          </Content>
        </Container>
    );
  }
}

или вы можете попытаться следовать (как я сделал) структуре NativeBaseKitchenSink: https://github.com/GeekyAnts/NativeBase-KitchenSink

...