ReactNative Demo - NavigationView 使用
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 - ImageVIew 使用ReactView
- ReactNative Demo - Dimensions 的使用React
- ReactNative Demo - Navigator 使用React
- ReactNative Demo -SearchInputReact
- ReactNative Demo - 仿攜程UI DemoReactUI
- ReactNative 仿網易新聞UI DemoReactUI
- Android特色控制元件NavigationView的使用Android控制元件NavigationView
- View—NavigationView學習ViewNavigation
- 在 ReactNative 中使用友盟分享React
- ReactNative-Navigator元件使用總結React元件
- reactnative外掛react-navigation使用心得ReactNavigation
- 安卓Toolbar使用 Demo(Kotlin)安卓Kotlin
- 使用DeepKE訓練命名實體識別模型DEMO(官方DEMO)模型
- ReactNative入門React
- ONE-ReactNativeReact
- WPF所有原生空間使用demo
- ReactNative初體驗React
- ReactNative分包實踐React
- ReactNative版友盟推送React
- ReactNative實現ToastReactAST
- ReactNative環境搭建React
- ReactNative之NavigatorReact
- ReactNative 生命週期React
- ReactNative仿《ONE》APPReactAPP
- ReactNative呼叫原生模組React
- ReactNative flex 佈局ReactFlex
- Weex & ReactNative & JSPatchReactJS
- ReactNative元件詳解React元件
- ReactNative iOS 互動ReactiOS
- Material Design 控制元件知識梳理(5) DrawerLayout && NavigationViewMaterial Design控制元件NavigationView
- dva框架使用詳解及Demo教程框架
- 使用vue寫的計算器demoVue
- 使用CodeModel生成Java類Java
- MaterialDesgin系列文章(二)NavigationView和DrawerLayout實現側滑功能NavigationView
- ReactNative之手勢識別React
- ReactNative常見問題React
- ReactNative WebView元件詳解ReactWebView元件
- ReactNative Image元件詳解React元件