_this._drawer.open 不是函数 react-native

Question

我正在为我的 React 本机应用程序使用本机基础的抽屉。当你点击菜单按钮时，抽屉没有打开，我得到这个错误（_this._drawer.open）不是一个功能这是什么问题这是我的代码

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>

    )
   };

 }

ps。这个抽屉和 npm 'react-native-drawer'

中的一样

Answer 1

根据native base documentation，你应该调用：

this.drawer.root.open()

Answer 2

我用过 react-native-drawer this npm 这对我有用

Answer 3

这是一个非常基本的工作示例，使用 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>
    );
  }
}

Answer 4

这是 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>
        );
    }
}

检查 Sidebar Sample Code from NativeBase-KitchenSink

Answer 5

this._drawer._root.open()

为我工作

_this._drawer.open 不是函数 react-native

_this._drawer.open is not a function react-native

react-native

native-base

react-native-ios

react-native-drawer