_this._drawer.open ist keine Funktion reactive-native

Ich benutze Schublade von nativer Basis für meine native Anwendung reagieren. wenn u die Menütaste klicken nicht die Schublade öffnen, und ich bekomme diese Fehlermeldung (_this._drawer.open) kein fucntion was ist der isse hier ist mein Code_this._drawer.open ist keine Funktion reactive-native

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);

hier mein SideBar.js ist

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. Diese Schublade ist das gleiche wie in npm 'reagieren-native-Schublade'

Quelle

2017-04-26 Asad

ich verwendet habe, reagieren-native-Schublade this npm das ist für mich arbeiten

Hier

Quelle

2017-04-26 08:52:31 Asad

Nach den native base documentation, sollten Sie rufen:

this.drawer.root.open()

Quelle

2017-04-26 08:34:50 Isilher

haben versucht, diese – Asad

Könnte es sein, dass Sie 'this._drawer' nennen anstelle von 'this.drawer'? – Isilher

Ich habe die react-native-Schublade installiert und das funktioniert – Asad

ist ein sehr einfaches Arbeits Beispiel mit 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> 
    ); 
    } 
}

Quelle

2017-05-07 23:46:45

Hier die sampl ist e Beispiel für NativeBase Drawer in seiner docs versehen mit einem Vermerk You need to create your own SideBar component and import it. sagen

Schublade Beispielcode

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

prüfen Sidebar Sample Code von NativeBase-KitchenSink

Quelle

2017-05-25 08:31:09

_this._drawer.open ist keine Funktion reactive-native

Antwort

Verwandte Themen