1
私はこのようなJsファイルを持っています。反応ネイティブの引き出しレイアウトを参照できません
"use strict"
var React = require('react-native')
var {
AppRegistry,
Component,
StyleSheet,
Text,
View,
TouchableNativeFeedback,
Image,
DrawerLayoutAndroid,
Navigator,
ListView,
ToolbarAndroid
} = React;
var ToolbarAndroid = require('ToolbarAndroid');
var Drawer = require('react-native-drawer');
import Screen2 from './Screen2';
import Screen3 from './Screen3';
class Screen1 extends Component {
openDrawer(){
this.refs['DRAWER'].openDrawer()
}
_handlePress(screen_name,loggedIn) {
this.refs.DRAWER.closeDrawer(),
this.refs.navigator.push(
{id: screen_name,
})
}
renderScene(route, navigator) {
switch(route.id){
case 'Screen1': return (
DrawerLayoutAndroid
drawerWidth={300}
ref={'DRAWER'}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}>
<View style={styles.container}>
<ToolbarAndroid
navIcon={require('image!ic_menu_white')}
titleColor="white"
style={styles.toolbar}
onIconClicked={() => this.openDrawer()}
onActionSelected={this.onActionSelected} />
</View>
<ListView contentContainerStyle={styles.list}
dataSource={this.state.dataSource}
renderRow={this.renderItem.bind(this)}
/>
</DrawerLayoutAndroid>
);
case 'Screen2': return (<Screen2 navigator={navigator} />)
case 'Screen3': return (<Screen3 navigator={navigator} />)
}
}
render(){
navigationView = (
<View style={styles.header}>
<View style={styles.HeadingContainer}>
<TouchableNativeFeedback>
<View style={styles.HeadingItem}>
<Text style={styles.menuText}>
Welcome!
</Text>
<Text style={styles.menuText}>
Guest
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={{flex: 4, backgroundColor: 'white'}}>
<TouchableNativeFeedback onPress={this._handlePress.bind(this,'Screen1')}>
<View style={styles.menuContainer}>
<Text style={styles.menu}>Albums</Text>
<Image
source={require('image!ic_menu_arrow')}
style={{flex : 1,width: 10, height: 10, margin: 20}} />
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={this._handlePress.bind(this,'Screen2')}>
<View style={styles.menuContainer}>
<Text style={styles.menu}>Member Validation</Text>
<Image
source={require('image!ic_menu_arrow')}
style={{flex : 1,width: 10, height: 10, margin: 20}} />
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={this._handlePress.bind(this,'Screen3')}>
<View style={styles.menuContainer}>
<Text style={styles.menu}>Settings</Text>
<Image
source={require('image!ic_menu_arrow')}
style={{flex : 1,width: 10, height: 10, margin: 20}} />
</View>
</TouchableNativeFeedback>
</View>
</View>
);
return(
<
<Navigator
initialRoute={{id: 'Screen1'}}
renderScene={this.renderScene.bind(this)}
ref='navigator'
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.FloatFromRight;
}} />
);
}
}
var styles = StyleSheet.create({
list: {
justifyContent: 'center',
flexDirection: 'row',
flexWrap: 'wrap'
},
renderLoading: {
padding: 30,
marginTop: 65,
alignItems: 'center'
},
container: {
flexDirection: 'column',
backgroundColor: '#FAFAFA',
},
backgroundImage: {
flex: 1,
resizeMode: 'cover', // or 'stretch'
},
rightContainer: {
flex: 1,
},
year: {
textAlign: 'center',
},
thumbnail: {
width: 53,
height: 81,
},
listView: {
paddingTop: 20,
backgroundColor: '#F5FCFF',
margin:20
},
movie: {
height: 150,
flex: 1,
alignItems: 'center',
flexDirection: 'column',
},
titles: {
fontSize: 10,
marginBottom: 8,
width: 90,
textAlign: 'center',
},
header: {
flex: 1,
flexDirection: 'column',
},
menuContainer: {
flexDirection: 'row',
},
HeadingItem: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
padding: 10,
},
HeadingContainer: {
flex: 1,
backgroundColor: '#00a2ed',
},
menuText: {
fontSize: 14,
color: 'black',
},
menu: {
flex: 4,
fontSize: 12,
color: 'black',
margin: 20,
},
toolbar: {
backgroundColor: '#00a2ed',
height: 56,
},
});
export default Screen1;
は、今私は引き出し参照変数を参照することはできませんよ「DRAWER'.Itは未定義エラーが開くことができるobject.Notまたは近い引き出していない私を与えます。
Screener1のDrawerLayoutが必要なので、RenderSceneメソッドでレンダリングしています。 レンダリングメソッドでDrawerLayoutを実装すると、参照用のDrawerを参照できます。
レンダリングメソッドのみで参照を作成できますか.IFはいこの問題を解決する方法。