私はネイティブに反応する新しいです、そして、簡単なアンドロイドアプリをやっています。 私は、画面の左側からドラッグできるDrawerLayoutAndroidを追加しました。私は私がナビゲーターを持つ私のToolbarAndroidの私のメニューアイコンをクリックしたときにそれを開きたいのですが、私はこの間違いを解決しNavbar(React Native)を使用してDrawerLayoutAndroidからToolbarAndroidを表示
"undefined is not an object (evaluating 'this.refs['DRAWER']')"
そして、私にエラーを与えたが、私はされて、別の1つを得た
"undefined is not an object (evaluating 'this.props.sidebarRef').
私のコードはこれです:
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;
と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;
ドゥ誰かがこのミスを解決しようとしていることを知っていますか?私はこの同じフォーラムをチェックし、同様の答えを見つけましたが、どれも私のために働いていませんでした。おかげさまで
sidebarRef={()=>this._setDrawer()}
そして、あなたのツールバーのコンポーネントで使用すると、自動的にこのような以前のOpenDraweFromToolbar.jsのdrawerlayout口メソッドを呼び出す小道具としてsidebarRefを呼び出す必要があります:
ありがとう、完璧に機能しました! – user2849167