Question

我是新手做出反应本地人，我正在做一个简单的Android应用程序。我添加了一个DrawerLayoutAndroid，我可以从屏幕左侧拖动。但是当我点击ToolbarAndroid中的菜单图标时，我想打开它，导航器给了我错误

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

然后我解决了这个错误，但我得到另一个

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

我的代码是：

MyToolbar.js

＆＃13;

'use strict';

import React, { Component } from 'react';
import {
	StyleSheet,
	View,
	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}
		titleColor={'white'} 
        onIconClicked={this._onIconClicked}/>
    );
  }
  
  _onIconClicked(){
	this.props.sidebarRef.refs['DRAWER'].openDrawer();
  } 
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  toolbar: {
   	height: 56,
    backgroundColor: '#08AE9E',
	width: 370,
	alignItems: 'center'
  }  
});

module.exports = MyToolbar;

＆＃13;

OpenDrawerFromToolbar.js

＆＃13;

'use strict';

import React, { Component } from 'react';
import {
	StyleSheet,
	View,
	Text,
	Navigator,
	TouchableHighlight,
	TouchableOpacity, 
	DrawerLayoutAndroid,
	ScrollView,
} from 'react-native';

var ToolbarAndroid = require('ToolbarAndroid');
var MyToolbar = require('./MyToolbar');
var MenuItem = require('./MenuItem');

class OpenDraweFromToolbar extends Component {
  render() {
	  
    var navigationView = (
      <View style={{flex: 1, backgroundColor: '#fff'}}>
        <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
		<MenuItem
			title="Calendar"
			selected={this.props.activeTab === 'Calendar'}
			//onPress={this.onTabSelect.bind(this, 'schedule')}
			icon={require('./icons/ic_today_black_24dp.png')}
			//selectedIcon={scheduleIconSelected}
		/>
		<MenuItem
			title="Offers"
			selected={this.props.activeTab === 'Offers'}
			//onPress={this.onTabSelect.bind(this, 'schedule')}
			icon={require('./icons/ic_today_black_24dp.png')}
			//selectedIcon={scheduleIconSelected}
		/>
		<MenuItem
			title="Boats"
			selected={this.props.activeTab === 'Boats'}
			//onPress={this.onTabSelect.bind(this, 'schedule')}
			icon={require('./icons/ic_directions_boat_black_24dp.png')}
			//selectedIcon={scheduleIconSelected}
		/>
		<MenuItem
			title="Profile"
			selected={this.props.activeTab === 'Profile'}
			//onPress={this.onTabSelect.bind(this, 'schedule')}
			icon={require('./icons/ic_account_circle_black_24dp.png')}
			//selectedIcon={scheduleIconSelected}
		/>		
      </View>
    );
	  
    return (
	  <DrawerLayoutAndroid
		drawerWidth={300}
		drawerPosition={DrawerLayoutAndroid.positions.Left}
		renderNavigationView={() => navigationView}
		ref={'DRAWER'}>		
		<MyToolbar style={styles.toolbar}
			title={'Calendar'}
			navigator={this.props.navigator}
			sidebarRef={this}/>	  				
		<View style={{flex: 1, alignItems: 'center'}}>	  		  
		  <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
		  <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
		</View>
	  </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: {
   	height: 200,
    backgroundColor: '#08AE9E',
	width: 370,
	alignItems: 'center'
  }
  
});

module.exports = OpenDraweFromToolbar;

＆＃13;

和calendarpage.js

＆＃13;

'use strict';

import React, { Component } from 'react';
import {
	StyleSheet,
	View,
	Text,
	Navigator,
	TouchableHighlight,
	TouchableOpacity, 
	DrawerLayoutAndroid,
	ScrollView,
	MenuItem,
} from 'react-native';

var ToolbarAndroid = require('ToolbarAndroid');
var MyToolbar = require('./MyToolbar');
var OpenDrawerFromToolbar = require('./OpenDrawerFromToolbar');

class CalendarPage extends Component {
  render() {
    return (
 		<Navigator
		  initialRoute = {{ name: 'OpenDrawerFromToolbar', index: 0 }}
		  renderScene={this.renderScene.bind(this)}
		  configureScene={ () => { return Navigator.SceneConfigs.PushFromRight; }}
		/> 			
    );
  }
	
  renderScene(route, navigator) {
  //_navigator = navigator;
      return (
          <OpenDrawerFromToolbar
            route={route}
            navigator={navigator}
            //data={route.data}
		   />
      );
  }
}

module.exports = CalendarPage;

＆＃13;

有人知道我应该尝试解决这个错误吗？我检查了同一个论坛，发现了类似的答案，但没有一个适合我。感谢。

Answer 1

你应该将drawerlayout开启方法作为道具传递给工具栏，如下所示：

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

在您的工具栏组件中，您应该将sidebarRef称为props，它会自动调用之前的OpenDraweFromToolbar.js的drawerlayout打开方法，如下所示：

 onIconClicked={this.props.sidebarRef}

最后将调用您的工具栏图标。这可能会对你有所帮助。

使用Navigator（React Native）通过ToolbarAndroid显示DrawerLayoutAndroid

1 个答案: