_this._drawer.open n'est pas une fonction react-native

J'utilise le tiroir de la base native pour mon application native. lorsque u cliquez sur le bouton de menu ouvrir le tiroir pas et je reçois cette erreur (_this._drawer.open) n'est pas un fucntion ce qui est le isse ici est mon code_this._drawer.open n'est pas une fonction react-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);

Voici mon 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. ce tiroir est le même que dans le NPM « réagit-tiroirs natif »

Source

2017-04-26 Asad

Je l'ai utilisé réagir natif tiroirs this npm des thats travaillent pour moi

Source

2017-04-26 08:52:31 Asad

Selon le native base documentation, vous devez appeler:

this.drawer.root.open()

Source

2017-04-26 08:34:50 Isilher

ont essayé – Asad

pourrait-il que vous appelez 'this._drawer' au lieu de 'this.drawer'? – Isilher

j'ai installé le reac-native-tiroir et c'est le travail – Asad

Voici un exemple de travail très de base en utilisant 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> 
    ); 
    } 
}

Source

2017-05-07 23:46:45

Voici le sampl e exemple de NativeBase Drawer fournis dans ses documents avec une note disant You need to create your own SideBar component and import it.

tiroir Exemple de code

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

Vérifier Sidebar Sample Code de NativeBase-KitchenSink

Source

2017-05-25 08:31:09

_this._drawer.open n'est pas une fonction react-native

Répondre

Questions connexes