ReactNative Demo - NavigationView 使用

男娘i 2022-09-23 14:00 218阅读 0赞

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);

发表评论取消回复

表情：

评论列表（有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

相关 ReactNative Demo -SearchInput

import React, { Component } from 'react'; import { AppRe

╰半橙微兮°/ 2022年09月23日 14:00/ 0 赞/ 264 阅读

相关 ReactNative Demo - 仿携程UI Demo

import React, { Component } from 'react'; import { AppRe

红太狼/ 2022年09月23日 14:00/ 0 赞/ 172 阅读

相关 ReactNative Demo - Navigator 使用

import React, { Component } from 'react'; import { AppRe

曾经终败给现在/ 2022年09月23日 14:00/ 0 赞/ 199 阅读

相关 ReactNative Demo - NavigationView 使用

import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, Vi

男娘i/ 2022年09月23日 14:00/ 0 赞/ 219 阅读

相关 ReactNative Demo - ImageVIew 使用

import React, { Component } from 'react'; import { AppRegistry, Styl

梦里梦外;/ 2022年09月23日 13:59/ 0 赞/ 197 阅读

相关 ReactNative Demo - Dimensions 的使用

import React, { Component } from 'react'; import { AppRe

r囧r小猫/ 2022年09月23日 13:59/ 0 赞/ 193 阅读

相关 NavigationView的使用

1.NavigationView的介绍最近忙着找工作，博客一直没有更新！在此，张星向各位忠实的读者抱以惭愧，然后在接下来的日子，我会定期的分享一些干货，也

秒速五厘米/ 2022年07月13日 23:46/ 0 赞/ 205 阅读

相关 NavigationView

介绍 NavigationView是Design Support库中提供的一个控件。使用第一步引入库到项目中 app/build.gradle

柔光的暖阳◎/ 2022年06月17日 13:50/ 0 赞/ 165 阅读

相关 NavigationView简单使用教程

NavigationView 1、NavigationView的作用 > 1. 配合`DrawerLayout`使用用于实现其中的`左侧菜单效果` > 2. Goo

墨蓝/ 2022年05月17日 20:36/ 0 赞/ 258 阅读

相关安卓NavigationView使用方法

目录导入依赖介绍NavigationView 布局文件、标签属性 -------------------- 导入依赖使用Design下的Navigat

╰半夏微凉°/ 2022年05月12日 06:33/ 0 赞/ 421 阅读