_this._drawer.open не является реакцией на функцию

Я использую ящик из родной базы для моего собственного приложения. когда вы нажимаете кнопку меню, ящик не открывается, и я получаю эту ошибку ( _this._drawer.open) не является функцией, что isse здесь мой код

import React, { Component } from 'react';
import {
AppRegistry,View
} from 'react-native';
import {ScrollableTab,TabHeading, Drawer, Container,Content, Header, 
Title, Button, Left, Right, Body, Icon ,Text,Tab, Tabs } from 'native-base';
import SecondStatus from './component/StatusComponent';
import HeaderComponent from './component/headerComponent';
import Sports from './component/Sports';
import MainPage from './component/MainPage';
import SideBar from './component/SideBar';

export default class Point extends Component {
    closeDrawer = () => {
    this.drawer.close()
   };
   openDrawer = () => {
    alert('asasa click');
    console.log('asad--');
    this._drawer.open();
    };
   render() {

   return (
          <Container>
           <Drawer
          ref={(ref) => { this._drawer = ref; }}
          content={<SideBar  />}
          onClose={() => this.closeDrawer()} >

            <Header  >
              <Left>
                <Button transparent onPress={this.openDrawer}>
                    <Icon name='arrow-back' />
                </Button>
            </Left>
            <Body>
                <Title>UrduPoint</Title>
            </Body>
            <Right>
                <Button transparent onPress=
         {this.openDrawer.bind(this)}>
                        <Icon name='menu' />
                    </Button>
            </Right>
            </Header>

         </Drawer>




        </Container>
     );
  }
 }

AppRegistry.registerComponent('Point', () => Point);

вот мой SideBar.js

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

export default class SideBar extends Component{
render(){
    return(
 <View>
   <Text>
     asad
     </Text>
   </View>

    )
   };

 }

пс. этот ящик такой же, как в npm 'Reaction-native-Box'

Источник

5 ответов

Решение

Я использовал ответ-родной ящик этот нпм, вот и работает для меня

Источник

this._drawer._root.open()

работает на меня

Источник

Вот очень простой рабочий пример использования native-base

import React, { Component } from 'react';
import {
  Container,
  Header,
  Left,
  Button,
  Icon,
  Body,
  Title,
  Right,
  Content,
  Drawer,
  Text
} from 'native-base';
import {
  StyleSheet,
  View,
  ScrollView
} from 'react-native';

class SideBar extends Component {
  render() {
    return (
      <Container>
        <Content
          bounces={false}
          style={{ flex: 1, backgroundColor: '#fff', top: -1 }}
        >
          <Button transparent>
            <Text>Action</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

export default class Core extends Component {
  openDrawer() {
    this._drawer._root.open();
  }
  closeDrawer() {
    this._drawer._root.close();
  }
  render() {
    return (
      <Drawer
        ref={(ref) => { this._drawer = ref; }}
        content={<SideBar navigator={this._navigator} />}
        onClose={() => this.closeDrawer()}
      >
        <Container>
          <Header>
            <Left>
              <Button
                transparent
                onPress={() => this.openDrawer()}
              >
                <Icon name='menu' />
              </Button>
            </Left>
            <Body>
              <Title>TITLE</Title>
            </Body>
            <Right />
          </Header>
          <Content>
          </Content>
        </Container>
      </Drawer>
    );
  }
}
Источник

Вот пример примера NativeBase Drawer, предоставленного в его документах с пометкой You need to create your own SideBar component and import it.

Образец кода ящика

import React, { Component } from 'react';
import { Drawer } from 'native-base';
import SideBar from './yourPathToSideBar';
export default class DrawerExample extends Component {
    render() {
      closeDrawer = () => {
        this.drawer._root.close()
      };
      openDrawer = () => {
        this.drawer._root.open()
      };
        return (
            <Drawer
              ref={(ref) => { this.drawer = ref; }}
              content={<SideBar navigator={this.navigator} />}
              onClose={() => this.closeDrawer()} >
            // Main View
          </Drawer>
        );
    }
}

Проверьте код образца боковой панели от https://github.com/GeekyAnts/NativeBase-KitchenSink

Источник

Согласно родной базовой документации, вам следует позвонить:

this.drawer.root.open()

Источник
Другие вопросы по тегам