_this._drawer.open 不是一个函数 react-native答案

【问题标题】：_this._drawer.open is not a function react-native_this._drawer.open 不是一个函数 react-native
【发布时间】：2023-03-28 17:53:01
【问题描述】：

我正在为我的 react native 应用程序使用原生基础的抽屉。当您单击菜单按钮时，抽屉未打开，我收到此错误（_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' 中的相同

【问题讨论】：

标签： react-native react-native-ios native-base react-native-drawer

【解决方案1】：

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

this.drawer.root.open()

【讨论】：

会不会是你打电话给this._drawer而不是this.drawer？

【解决方案2】：

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

【讨论】：

【解决方案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>
    );
  }
}

【讨论】：

【解决方案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>
        );
    }
}

从NativeBase-KitchenSink检查Sidebar Sample Code

【讨论】：

【解决方案5】：

this._drawer._root.open()

为我工作

【讨论】：