2

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

    )
   };

 }

附言。此抽屉与 npm 'react-native-drawer' 中的相同

4

5 回答 5

0

根据本机基础文档，您应该调用：

this.drawer.root.open()

于 2017-04-26T08:34:50.350 回答
0

我已经使用了 react-native-drawer这个 npm这对我有用

于 2017-04-26T08:52:31.820 回答
0

这是一个非常基本的工作示例，使用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>
    );
  }
}
于 2017-05-07T23:46:45.593 回答
0

这是其文档中提供的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检查侧边栏示例代码

于 2017-05-25T08:31:09.600 回答
0

this._drawer._root.open()

为我工作

于 2018-04-19T20:11:43.807 回答