RN控件之DrawerLayoutAndroid导航栏

 1 /**
 2  * Sample React Native App
 3  * https://github.com/facebook/react-native
 4  */
 5 'use strict';
 6 import React, {
 7   AppRegistry,
 8   Component,
 9   StyleSheet,
10   Text,
11   View,
12   DrawerLayoutAndroid
13 } from 'react-native';
14 
15 class MyProject2 extends Component {
16   render() {
17       var navigationView =(
18           <View style={{flex:1,backgroundColor:'blue'}}>
19               <Text style={{margin:10,color:'#fff',fontSize:15,textAlign:'center'}}>
20                   我是导航功能栏标题
21               </Text>
22               <Text style={{marginTop:10,marginLeft:20,color:'#fff',fontSize:15,textAlign:'left'}}>
23                   1.功能1
24               </Text>
25               <Text style={{marginTop:10,marginLeft:20,color:'#fff',fontSize:15,textAlign:'left'}}>
26                   2.功能2
27               </Text>
28           </View>
29       )
30       return(
31           <DrawerLayoutAndroid
32               drawerWidth={150} drawerPosition={DrawerLayoutAndroid.positions.left}
33               renderNavigationView={() => navigationView}>
34               <View style={{flex:1,alignItems:'center'}}>
35                   <Text style={{margin:10,fontSize:15,textAlign:'right'}}>
36                         我是主布局内容
37                   </Text>
38               </View>
39           </DrawerLayoutAndroid>
40       );
41 
42   }
43 }
44 AppRegistry.registerComponent('MyProject2', () => MyProject2);