Zeige DrawerLayoutAndroid über ToolbarAndroid mit Navigator (Native Reagieren)

Question

Ich bin neu zu reagieren native und ich mache eine einfache Android-App. Ich habe ein DrawerLayoutAndroid hinzugefügt, das ich von der linken Seite meines Bildschirms ziehen kann. Aber ich mag es zu öffnen, wenn ich auf meinem Menü-Symbol in meiner ToolbarAndroid klicken, um einen Navigator mit gab mir den Fehler

"undefined is not an object (evaluating 'this.refs['DRAWER']')" 

Dann löste ich diesen Fehler, aber ich habe ein anderes seine

"undefined is not an object (evaluating 'this.props.sidebarRef'). 

Mein Code ist dies:

MyToolbar.js

'use strict'; 
 

 
import React, { Component } from 'react'; 
 
import { 
 
\t StyleSheet, 
 
\t View, 
 
\t Text 
 
} from 'react-native'; 
 

 
var ToolbarAndroid = require('ToolbarAndroid'); 
 

 
class MyToolbar extends Component { 
 
    render() { 
 
    var navigator = this.props.navigator; 
 
    return (
 
     <ToolbarAndroid 
 
     title={this.props.title} 
 
     navIcon={require('./icons/ic_menu_white_24dp.png')} 
 
     style = {styles.toolbar} 
 
\t \t titleColor={'white'} 
 
     onIconClicked={this._onIconClicked}/> 
 
    ); 
 
    } 
 
    
 
    _onIconClicked(){ 
 
\t this.props.sidebarRef.refs['DRAWER'].openDrawer(); 
 
    } 
 
} 
 

 
const styles = StyleSheet.create({ 
 
    container: { 
 
    flex: 1, 
 
    alignItems: 'center', 
 
    backgroundColor: '#F5FCFF', 
 
    }, 
 
    toolbar: { 
 
    \t height: 56, 
 
    backgroundColor: '#08AE9E', 
 
\t width: 370, 
 
\t alignItems: 'center' 
 
    } 
 
}); 
 

 
module.exports = MyToolbar;

OpenDrawerFromToolbar.js

'use strict'; 
 

 
import React, { Component } from 'react'; 
 
import { 
 
\t StyleSheet, 
 
\t View, 
 
\t Text, 
 
\t Navigator, 
 
\t TouchableHighlight, 
 
\t TouchableOpacity, 
 
\t DrawerLayoutAndroid, 
 
\t ScrollView, 
 
} from 'react-native'; 
 

 
var ToolbarAndroid = require('ToolbarAndroid'); 
 
var MyToolbar = require('./MyToolbar'); 
 
var MenuItem = require('./MenuItem'); 
 

 
class OpenDraweFromToolbar extends Component { 
 
    render() { 
 
\t 
 
    var navigationView = (
 
     <View style={{flex: 1, backgroundColor: '#fff'}}> 
 
     <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text> 
 
\t \t <MenuItem 
 
\t \t \t title="Calendar" 
 
\t \t \t selected={this.props.activeTab === 'Calendar'} 
 
\t \t \t //onPress={this.onTabSelect.bind(this, 'schedule')} 
 
\t \t \t icon={require('./icons/ic_today_black_24dp.png')} 
 
\t \t \t //selectedIcon={scheduleIconSelected} 
 
\t \t /> 
 
\t \t <MenuItem 
 
\t \t \t title="Offers" 
 
\t \t \t selected={this.props.activeTab === 'Offers'} 
 
\t \t \t //onPress={this.onTabSelect.bind(this, 'schedule')} 
 
\t \t \t icon={require('./icons/ic_today_black_24dp.png')} 
 
\t \t \t //selectedIcon={scheduleIconSelected} 
 
\t \t /> 
 
\t \t <MenuItem 
 
\t \t \t title="Boats" 
 
\t \t \t selected={this.props.activeTab === 'Boats'} 
 
\t \t \t //onPress={this.onTabSelect.bind(this, 'schedule')} 
 
\t \t \t icon={require('./icons/ic_directions_boat_black_24dp.png')} 
 
\t \t \t //selectedIcon={scheduleIconSelected} 
 
\t \t /> 
 
\t \t <MenuItem 
 
\t \t \t title="Profile" 
 
\t \t \t selected={this.props.activeTab === 'Profile'} 
 
\t \t \t //onPress={this.onTabSelect.bind(this, 'schedule')} 
 
\t \t \t icon={require('./icons/ic_account_circle_black_24dp.png')} 
 
\t \t \t //selectedIcon={scheduleIconSelected} 
 
\t \t /> \t \t 
 
     </View> 
 
    ); 
 
\t 
 
    return (
 
\t <DrawerLayoutAndroid 
 
\t \t drawerWidth={300} 
 
\t \t drawerPosition={DrawerLayoutAndroid.positions.Left} 
 
\t \t renderNavigationView={() => navigationView} 
 
\t \t ref={'DRAWER'}> \t \t 
 
\t \t <MyToolbar style={styles.toolbar} 
 
\t \t \t title={'Calendar'} 
 
\t \t \t navigator={this.props.navigator} 
 
\t \t \t sidebarRef={this}/> \t \t \t \t \t 
 
\t \t <View style={{flex: 1, alignItems: 'center'}}> \t \t \t 
 
\t \t <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text> 
 
\t \t <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text> 
 
\t \t </View> 
 
\t </DrawerLayoutAndroid> 
 
    ); 
 
    } 
 
    
 
    gotoPersonPage() { 
 
    this.props.navigator.push({ 
 
     id: 'PersonPage', 
 
     name: 'hola', 
 
    }); 
 
    } 
 
    
 
    _setDrawer() { 
 
    this.refs['DRAWER'].openDrawer(); 
 
    } 
 
} 
 

 
const styles = StyleSheet.create({ 
 
    container: { 
 
    flex: 1, 
 
    alignItems: 'center', 
 
    backgroundColor: '#F5FCFF', 
 
    }, 
 
    toolbar: { 
 
    \t height: 200, 
 
    backgroundColor: '#08AE9E', 
 
\t width: 370, 
 
\t alignItems: 'center' 
 
    } 
 
    
 
}); 
 

 
module.exports = OpenDraweFromToolbar;

und calendarpage.js

'use strict'; 
 

 
import React, { Component } from 'react'; 
 
import { 
 
\t StyleSheet, 
 
\t View, 
 
\t Text, 
 
\t Navigator, 
 
\t TouchableHighlight, 
 
\t TouchableOpacity, 
 
\t DrawerLayoutAndroid, 
 
\t ScrollView, 
 
\t MenuItem, 
 
} from 'react-native'; 
 

 
var ToolbarAndroid = require('ToolbarAndroid'); 
 
var MyToolbar = require('./MyToolbar'); 
 
var OpenDrawerFromToolbar = require('./OpenDrawerFromToolbar'); 
 

 
class CalendarPage extends Component { 
 
    render() { 
 
    return (
 
    \t \t <Navigator 
 
\t \t initialRoute = {{ name: 'OpenDrawerFromToolbar', index: 0 }} 
 
\t \t renderScene={this.renderScene.bind(this)} 
 
\t \t configureScene={() => { return Navigator.SceneConfigs.PushFromRight; }} 
 
\t \t /> \t \t \t 
 
    ); 
 
    } 
 
\t 
 
    renderScene(route, navigator) { 
 
    //_navigator = navigator; 
 
     return (
 
      <OpenDrawerFromToolbar 
 
      route={route} 
 
      navigator={navigator} 
 
      //data={route.data} 
 
\t \t /> 
 
    ); 
 
    } 
 
} 
 

 
module.exports = CalendarPage;

Do es jemand weiß, was soll ich versuchen, diesen fehler zu lösen? Ich habe das gleiche Forum überprüft und ähnliche Antworten gefunden, aber keiner von ihnen hat für mich funktioniert. Danke.

Answer 1

Sie sollten öffnen Methode übergeben drawerlayout als Requisiten wie diese Symbolleiste:

sidebarRef={()=>this._setDrawer()} 

Und in der Symbolleiste Komponente sollten Sie sidebarRef als Requisiten nennen, die automatisch die drawerlayout Öffnungsmethode früherer OpenDraweFromToolbar.js wie folgt aufrufen :

onIconClicked={this.props.sidebarRef} 

Schließlich wird Ihr Symbolleistensymbol aufgerufen. Dies könnte Ihnen helfen.