鱼C论坛

 找回密码
 立即注册
查看: 3010|回复: 1

[技术交流] react native手机app编程之样式与布局

[复制链接]
发表于 2017-8-3 10:53:20 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
react最有特色的就是组件式编程,上次演示的helloworld代码只用了两个组件,一个是<View></View>组件,有点类似于html里div标签的作用,一个是<Text></Text>放置文本的组件。在使用组件之前要用import语句引入人家已经编辑好的组件,其实我们自己也可以创建组件,这个明天再说。

在组件的尖括号里可以放置行内样式,像昨天的代码一样。也可以把样式分离出来,单写进一个json变量里,用的时候引入进标签里。例如,以下代码:
  1. /**
  2. * Sample React Native App
  3. * https://github.com/facebook/react-native
  4. * @flow
  5. */

  6. import React, { Component } from 'react';
  7. import {
  8.   AppRegistry,
  9.   StyleSheet,
  10.   Text,
  11.   View
  12. } from 'react-native';

  13. export default class myreact extends Component {
  14.   render() {
  15.     return (
  16.       <View style={styles.container}>
  17.         <Text style={styles.box1}>读书</Text>
  18.         <Text style={styles.box2}>游戏</Text>
  19.         <Text style={styles.box3}>看视频</Text>
  20.         <Text style={styles.box4}>新闻</Text>      
  21.       </View>
  22.     );
  23.   }
  24. }

  25. const styles = StyleSheet.create({
  26.   container: {
  27.     flex: 1,
  28.     backgroundColor: '#F5FCFF',
  29.     flexDirection: 'row',
  30.     justifyContent:'flex-start',
  31.     flexWrap: 'wrap',
  32.   },
  33.   box1: {
  34.     fontSize: 20,
  35.     textAlign: 'center',
  36.     textAlignVertical: 'center',
  37.     margin: 10,
  38.     backgroundColor: 'green',
  39.     height: 170,
  40.     width:90
  41.   },
  42.   box2: {
  43.     fontSize: 20,
  44.     textAlign: 'center',
  45.     textAlignVertical: 'center',
  46.     margin: 10,
  47.     backgroundColor: 'red',
  48.     height: 170,
  49.     width:100
  50.   },
  51.   box3: {
  52.     fontSize: 20,
  53.     textAlign: 'center',
  54.     textAlignVertical: 'center',
  55.     margin: 10,
  56.     backgroundColor: 'blue',
  57.     height: 170,
  58.     width:120
  59.   },
  60.   box4: {
  61.     fontSize: 20,
  62.     textAlign: 'center',
  63.     textAlignVertical: 'center',
  64.     margin: 10,
  65.     backgroundColor: 'orange',
  66.     height: 170,
  67.     width:220
  68.   },
  69. });

  70. AppRegistry.registerComponent('myreact', () => myreact);
复制代码

这就类似于网页制作的盒子布局,跟css样式很像,还给我们提供了许多额外的样式,在container变量里的flex:1表示把整个view标签充满整个屏幕,
flexDirection: 'row',
    justifyContent:'flex-start',
    flexWrap: 'wrap',
这3个语句依次是设置为行布局,内容从前向后排列,自动换行。

在文件存盘后程序会自动刷新手机app,如果卡了你也通过摇一摇的方式调出主菜单,点reload手动刷新也行。
以下是手机上显示的效果:
saasda.png

评分

参与人数 1荣誉 +6 鱼币 +6 贡献 +6 收起 理由
不二如是 + 6 + 6 + 6 加油~排版要再进步

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-8-3 11:17:41 | 显示全部楼层
有点模样了~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 19:01

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表