设为首页收藏本站

react native【免费】VIP视频教程 rn开发者交流论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2292|回复: 355

[视频教程] 12、手把手教React Native实战之View组件

  [复制链接]

401

主题

762

帖子

6842

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6842
发表于 2016-6-16 10:55:15 | 显示全部楼层 |阅读模式
#12、手把手教React Native实战之View组件

在React Native里有一个类似于div的组件,那就是View组件,支持多层嵌套,支持flexbox布局

加作者微信公众号(dongfangyao888)或扫描下面二维码
推送高清视频教程+语音解说+课堂笔记和源码

实例步骤:

1.加载View组件

2.创建组件

3.添加样式表

4.注册入口

5.外层布局

  <View style={styles.container}>

        <View style={styles.item}></View>
        <View style={styles.item}></View>
        <View style={styles.item}></View>

      </View>


6.flexbox水平三栏布局

  外联样式:style={styles.container}

  内联样式:style={{flex:1,borderWidth:1,borderColor:'red',flexDirection:'row'}}

  多个样式:style=
  {[styles.container,styles.flex,{borderWidth:1,borderColor:'red'}]}

  

7.上下两栏布局

<View style={[styles.center,styles.flex]}>
            <Text>团购</Text>
          </View>

          <View style={[styles.center,styles.flex]}>
            <Text>客栈,公寓</Text>

          </View>

8.完善效果

    <View style={[styles.item,styles.lineLeftRight]}>

          <View style={[styles.center,styles.flex,styles.lineCenter]}>
            <Text style={styles.font}>海外酒店</Text>
          </View>

          <View style={[styles.center,styles.flex]}>
            <Text style={styles.font}>特惠酒店</Text>

          </View>



        </View>


##12、配套视频(下载地址)【回复本帖才可见】:
游客,如果您要查看本帖隐藏内容请回复

react native vip论坛免费发布【手把手教react native实战开发】视频教程,立志于打造全互联网最全面最详细最易懂的React Native
开发视频教程,Facebook已经在多项产品中使用了React Native,并且将持续地投入建设,让我们引领react native开发的潮流!
回复

使用道具 举报

3

主题

54

帖子

179

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
179
发表于 2016-6-21 15:58:02 | 显示全部楼层
为什么要用最小线宽,直接写具体的数字不行吗
回复 支持 反对

使用道具 举报

1

主题

84

帖子

203

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
203
发表于 2016-6-23 21:18:53 | 显示全部楼层
学习学习学习学习
回复 支持 反对

使用道具 举报

1

主题

10

帖子

39

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
39
发表于 2016-6-25 23:26:27 | 显示全部楼层
撒打算的a
回复

使用道具 举报

0

主题

14

帖子

32

积分

新手上路

Rank: 1

积分
32
发表于 2016-6-26 14:40:14 | 显示全部楼层
高清吗
回复

使用道具 举报

0

主题

49

帖子

142

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
142
发表于 2016-6-28 14:02:33 | 显示全部楼层
快让我进去。。。。。。。
回复 支持 反对

使用道具 举报

0

主题

25

帖子

100

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
100
发表于 2016-6-29 13:45:02 | 显示全部楼层
view 组件化开发
回复 支持 反对

使用道具 举报

0

主题

25

帖子

100

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
100
发表于 2016-6-29 13:45:20 | 显示全部楼层
vieW 组件化开发 react-native
回复 支持 反对

使用道具 举报

0

主题

225

帖子

474

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
474
发表于 2016-7-1 16:44:17 | 显示全部楼层
666666666666666666
回复 支持 反对

使用道具 举报

1

主题

127

帖子

353

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
353
发表于 2016-7-2 17:04:52 | 显示全部楼层
ioahspoijfpoasjd
回复 支持 反对

使用道具 举报

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

本版积分规则

QQ|Archiver|手机版|小黑屋|ReactNative Inc.    

GMT+8, 2018-6-24 23:02 , Processed in 0.148503 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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