React Native 填坑一

关于RN的布局

  1. 分为主轴和交叉轴, 主轴可以是横向也可以是竖向,交叉轴也是对应的。
  2. 主轴默认是竖向。如果要更改用flexdirection
  3. 主轴对齐方式:justifyContent
  4. 交叉轴对齐方式:alignItems

问题1. 横向排列居中对齐

要改主轴的方向

flexDirection:"row",justifyContent:"center"}

问2.水平布局并铺满的问题

要铺满用flex:1 .

如果发面没有铺满,居中显示了。有可能是设置了交叉轴的对齐方式。

检查alignItems有没有设置值。

问3.轮播图的使用。

用的是Swipper组件。需要先引用

import Swiper from 'react-native-swiper';
  1. 轮播控件如果封装成组件,如何对属性进行传值 。
autoplay={this.props.autoplay}  //组件里使用
autoplay={false} //调用的时候这样显示 //传自定义的属性值
dtList={this.state.dataList}
//接收时
dataList={this.props.dtList} //是否显示左右箭头
showsButtons=true //默认不显示
//是否自动播放
autoplay=true
//是否显示图片下方的小圆点
showsPagination={false}
//dot
小圆点的样式 ,里面是view包装的style .
//activeDot
点中的样式

npm 安装时 后面的-save参数表示什么意思

--save的作用是:配置package.json,相当于Android的gradle,我们依赖的库在node-modules,相当于Android的libs文件夹,

js中的map方法

map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理的后值

image source的路径问题

image source的指向问题。 本地路径用require .网上的用uri

  <Image source={require("../../../Image/icon_right.png")} style={{width:20,height:20}}/>

React Native 填坑一的更多相关文章

  1. React Native填坑之旅--与Native通信之iOS篇

    终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...

  2. React Native填坑之旅--组件生命周期

    这次我们来填React Native生命周期的坑.这一点非常重要,需要有一个清晰的认识.如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容. 基本上一个React Native的 ...

  3. React Native填坑之旅--Flow篇(番外)

    flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...

  4. React Native填坑之旅--重新认识RN

    如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...

  5. React Native填坑之旅--布局篇

    代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...

  6. React Native填坑之旅--Navigation篇

    React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Naviga ...

  7. React Native填坑之旅--ListView篇

    列表显示数据,基本什么应用都是必须.今天就来从浅到深的看看React Native的ListView怎么使用.笔者写作的时候RN版本是0.34. 最简单的 //@flow import React f ...

  8. React Native填坑之旅--动画

    动画是提高用户体验不可缺少的一个元素.恰如其分的动画可以让用户更明确的感知当前的操作是什么. 无疑在使用React Native开发应用的时候也需要动画.这就需要知道RN都给我们提供了那些动画,和每个 ...

  9. React Native填坑之旅--Button篇

    从React过来,发现React Native(以下简称RN)居然没有Button.隔壁的iOS是有UIButton的,隔壁的隔壁的Android里也是有的.没有Button,就没有点击效果啊.这还真 ...

随机推荐

  1. springMVC参数绑定JSON类型的数据

    需求就是: 现在保存一个Student,并且保存Student的friend,一个student会有多个朋友,这里要传递到后台的参数是: var friends = new Array(); var ...

  2. 学习git最好的方式

    1:登陆git官网网站 https://git-scm.com 2:点击esay to learn连接 3:点击Book连接 4:选择简体中文,下载PDF文档,也可以在线学习.

  3. javascript的事件流

    事件流包括三个阶段: 1.事件捕获阶段 2.处于目标阶段 3.事件冒泡阶段 1.事件捕获阶段 现在页面中有一个按钮. 如果单击这个按钮的话,在事件捕获过程中,document会首先接收到click事件 ...

  4. python读取文件中的字典

    import ast def file_read():    with open('D:\\pytharm\\jichuyufa\\day2\\pro_cty_con.txt', 'r', encod ...

  5. python学习之----异常处理小示例

    网络是十分复杂的.网页数据格式不友好,网站服务器宕机,目标数据的标签找不到,都 是很麻烦的事情.网络数据采集最痛苦的遭遇之一,就是爬虫运行的时候你洗洗睡了,梦 想着明天一早数据就都会采集好放在数据库里 ...

  6. selenium+python自动化98--文件下载弹窗处理(PyKeyboard)

    前言 在web自动化下载操作时,有时候会弹出下载框,这种下载框不属于web的页面,是没办法去定位的(有些同学一说到点击,脑袋里面就是定位!定位!定位!) 有时候我们并不是非要去定位到这个按钮再去点击, ...

  7. linux命令--df/ps aux/netstat/hostname/tail

    查询文件系统 df -h 查询cpu使用情况 top 进程查看: ps aux | grep haproxy 端口查看: netstat -lntup 主机名查看 hostname 查看文件末尾字符串 ...

  8. centos上自动执行脚本执行php文件

    1 先编写执行PHP文件的脚本 vi php.sh #!/bin/sh /usr/bin/php /etc/1.php 2把php.sh添加到自动执行任务中 cd /etc/ vi crontab * ...

  9. win10 + Ubuntu 双系统,重装后的引导修复,时间调整和启动项调整

    ▶ 原先为 win10 + Ubuntu 双系统,使用 grub2 作引导,在重装了 win10 (大作死升到了1803)后系统重写了引导,启动项里找不到 Ubuntu,需要修复. ● 参考[http ...

  10. zabbix监控vCenter报错,无法自动发现主机

    公司机房停电检修,检修完成后重新上电,发现VCSA起不来了,尝试多次无法解决,无奈只好重装.重装VCSA 6.5U2之后又发现无法自动发现主机,报错如下: 'config.vpxd.stats.max ...