import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
DrawerLayoutAndroid,
ListView,
} from 'react-native';
class AwesomeProject extends Component {
render() {
var navigationView = (
<View style={{flex: 1, backgroundColor: '#fff',flexDirection:"column",}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
</View>
);
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Right}
renderNavigationView={() => navigationView}>
<View style={{flex: 1, alignItems: 'flex-end',justifyContent: "space-around"}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>Hello</Text>
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
</View>
</DrawerLayoutAndroid>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
elements:{
alignItems: "flex-start",
color:"#000000",
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
base: {
width: 38,
height: 38,
},
background: {
backgroundColor: '#ff0000',
},
active: {
borderWidth: 2,
borderColor: '#00ffff',
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
ReactNative Demo - NavigationView 使用
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。
推荐阅读更多精彩内容
- Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...