React Native 填坑一
React Native 填坑一
关于RN的布局
- 分为主轴和交叉轴, 主轴可以是横向也可以是竖向,交叉轴也是对应的。
- 主轴默认是竖向。如果要更改用flexdirection
- 主轴对齐方式:justifyContent
- 交叉轴对齐方式:alignItems
问题1. 横向排列居中对齐
要改主轴的方向
flexDirection:"row",justifyContent:"center"}
问2.水平布局并铺满的问题
要铺满用flex:1 .
如果发面没有铺满,居中显示了。有可能是设置了交叉轴的对齐方式。
检查alignItems有没有设置值。
问3.轮播图的使用。
用的是Swipper组件。需要先引用
import Swiper from 'react-native-swiper';
- 轮播控件如果封装成组件,如何对属性进行传值 。
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 填坑一的更多相关文章
- React Native填坑之旅--与Native通信之iOS篇
终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...
- React Native填坑之旅--组件生命周期
这次我们来填React Native生命周期的坑.这一点非常重要,需要有一个清晰的认识.如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容. 基本上一个React Native的 ...
- React Native填坑之旅--Flow篇(番外)
flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...
- React Native填坑之旅--重新认识RN
如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...
- React Native填坑之旅--布局篇
代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...
- React Native填坑之旅--Navigation篇
React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Naviga ...
- React Native填坑之旅--ListView篇
列表显示数据,基本什么应用都是必须.今天就来从浅到深的看看React Native的ListView怎么使用.笔者写作的时候RN版本是0.34. 最简单的 //@flow import React f ...
- React Native填坑之旅--动画
动画是提高用户体验不可缺少的一个元素.恰如其分的动画可以让用户更明确的感知当前的操作是什么. 无疑在使用React Native开发应用的时候也需要动画.这就需要知道RN都给我们提供了那些动画,和每个 ...
- React Native填坑之旅--Button篇
从React过来,发现React Native(以下简称RN)居然没有Button.隔壁的iOS是有UIButton的,隔壁的隔壁的Android里也是有的.没有Button,就没有点击效果啊.这还真 ...
随机推荐
- springMVC学习(2)
一.使用注解的处理器映射器和适配器 1) 在这个下面的/org/springframework/web/servlet/DispatcherServlet.properties文件,从这个文件中加载处 ...
- airtest IDE问题汇总
FAQ 1.同一个脚本,使用IDE可以运行,使用命令行运行报错 原因:曾经开启过anyproxy代理,添加过HTTP_PROXY环境变量,将其取消即可 unset HTTP_PROXY https:/ ...
- ThinkPHP框架学习摘要
框架在linux与win下区别 1.文件权限设置: 2.大小写不规范: 学习框架的基本思路 : 1.如何收入并配置框架: 2.Controller的命名规范与书写规范: 3.Model的命名规范与书写 ...
- SonarQube
代码质量管理 Sonar 是一个用于代码质量管理的开放平台.通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具.与持续集成工具(例如 Hudson/Jenkins 等)不 ...
- GSO/TSO/GRO等对VirtIO虚机的网络性能影响分析(by quqi99)
作者:张华 发表于:2016-04-05版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) IP层 ...
- CSS3基础
内容: 1.圆角 border-radius 2.阴影 text-shadow.box-shadow 3.渐变 linear.radial 4.rgba rgb+alpha opacity 5.tra ...
- selenium+python自动化98--文件下载弹窗处理(PyKeyboard)
前言 在web自动化下载操作时,有时候会弹出下载框,这种下载框不属于web的页面,是没办法去定位的(有些同学一说到点击,脑袋里面就是定位!定位!定位!) 有时候我们并不是非要去定位到这个按钮再去点击, ...
- 4.Spring中使用Log4j
转自:https://blog.csdn.net/luohai859/article/details/52250807 这里要实现web项目中利用Spring来使用Log4j (1)接上面的工程,然后 ...
- 拒绝网页被 iframe 嵌套
在响应头里加一个X-Frame-Options DENY:浏览器拒绝当前页面加载任何Frame页面 SAMEORIGIN:frame页面的地址只能为同源域名下的页面 ALLOW-FROM origin ...
- 字符串和JSON对象互转的方法
采用Ajax的项目开发过程中,经常需要将JSON格式的字符串返回到前端,前端解析成JS对象(JSON ).字符串转JSON对象 1.eval方式解析.function strToJson(str){ ...