React-Native 侧滑容器DrawerLayoutAnd
2016-06-11 本文已影响251人
小张呵呵
感谢东方耀老师
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
PixelRatio,
Text,
Image,
TouchableHighlight,
DrawerLayoutAndroid,
ProgressBarAndroid,
View
} from 'react-native';
class MyFirstProject extends Component {
show(txt) {
alert(txt);
}
render() {
var nagvigationView = (
<View style={{ flex: 1, backgroundColor: "#ff0" }}>
<Text style={{ margin: 10, fontSize: 12, textAlign: 'left' }}>i m nagvigation</Text>
</View>
);
return (
<DrawerLayoutAndroid
drawerWidth = {300}
drawerPosition = {DrawerLayoutAndroid.positions.Left}
renderNavigationView = {() => nagvigationView}
// renderNavigationView={() => navigationView}
>
<View style ={styles.flex}>
<Image style={styles.img}
source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
/>
<TouchableHighlight onPress={this.show.bind(this, '欢迎学习React Native技术') }
underlayColor='#333'>
<Text style={styles.touchtext}>haha</Text>
</TouchableHighlight>
</View>
</DrawerLayoutAndroid >
);
}
}
const styles = StyleSheet.create({
flex: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
img: {
height: 300,
width: 300,
borderRadius: 150,
borderColor: '#ccc',
},
touchtext: {
fontSize: 39,
width: 300,
alignItems: 'center',
justifyContent: 'center',
}
});
AppRegistry.registerComponent('MyFirstProject', () => MyFirstProject);