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版友盟推送React
- ReactNative初體驗React
- ReactNative分包實踐React
- ReactNative環境搭建React
- ReactNative實現ToastReactAST
- MaterialDesgin系列文章(二)NavigationView和DrawerLayout實現側滑功能NavigationView
- MaterialDesign系列文章(二)NavigationView和DrawerLayout實現側滑功能NavigationView
- 安卓Toolbar使用 Demo(Kotlin)安卓Kotlin
- 使用DeepKE訓練命名實體識別模型DEMO(官方DEMO)模型
- ReactNative之手勢識別React
- ReactNative ViewPageAndroid元件詳解ReactViewAndroid元件
- WPF所有原生空間使用demo
- ReactNative開發城市列表頁React
- ReactNative與iOS的互動ReactiOS
- ReactNative TextInput 常用方法實踐React
- Android ReactNative資料互動AndroidReact
- ReactNative 專案工作總結React
- dva框架使用詳解及Demo教程框架
- 使用vue寫的計算器demoVue
- ReactNative實現地圖導航React地圖
- ReactNative 踩坑之 iOS 原生元件ReactiOS元件
- ReactNative自定義元件及屬性React元件
- ReactNative仿某租車軟體React
- ReactNative分散式熱更新系統React分散式
- ReactNative升級0.56.0注意問題React
- 科大訊飛離線lunix tts demo使用TTS
- 使用 GPU 進行 Lightmap 烘焙 - 簡單 demoGPU
- ReactNative開發 WebStorm IDEA 註冊碼ReactWebORMIdea
- ReactNative學習筆記九之TabNavigatorReact筆記
- ReactNative原始碼篇:通訊機制React原始碼
- ReactNative學習筆記十一之FlatListReact筆記
- Airbnb:ReactNative從選擇到放棄AIReact
- ReactNative自定義NetworkingModule網路模組React
- ReactNative載入base64圖片React
- ReactNative第三方UI庫ReactUI
- ReactNative原始碼解析-初識原始碼React原始碼
- demo
- iOS 藍芽4.0開發使用(內附Demo)iOS藍芽
- Redux-saga框架使用詳解及Demo教程Redux框架