以下是本人在React Native开发工作中使用的一些小技巧,记录一下。
1.从网络上拉取下来的React Native缺少React和React Native库.
终端
1. cd 项目根目录
2. npm install
3. 完成之后,在根目录中会出现node_modules文件夹(和package.json同级目录).OK.接下来使用Xcode再次打开就好了.
2.如何导入第三方库.
1.cd 项目根目录
2.npm i 库名 --save
如: npm i react-native-tab-navigator --save 导入了react-native-tab-navigator这个库
3.获取屏幕的宽和高
使用Dimensions
var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window');
使用:
leftViewStyle:{
width:width/4,
},
4.根据不同的平台设置不同的效果
使用Platform
先引入Platform:
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
Image,
TouchableOpacity,
Platform
} from 'react-native';
使用:
iconStyle:{
width: Platform.OS === 'ios' ? 30 : 25,
height:Platform.OS === 'ios' ? 30 : 25
},
5.颜色值使用RGB三色值.
backgroundColor:'rgba(234,234,234,1.0)',
6.ref的使用,可以获取上下文的组件.
<TextInput ref="tel" style={styles.telInputStyle} placeholder = {'React Native工作小技巧及填坑记录的更多相关文章
- iOS工作小技巧及填坑记录
以下是本人在iOS开发工作中使用的一些小技巧,记录一下. 1.使用XXX.pch文件便捷开发+加速Build 在IOS开发的项目中有一个XX_Prefix.pch XX_Prefix.pch:扩展名. ...
- 微信小程序开发技巧及填坑记录
以下是自己在开发过程中遇到的坑和小技巧,记录以下: 1.出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add pag ...
- React Native 导入原生Xcode项目总结与记录
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- webapp填坑记录[更新中]
网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...
- webapp填坑记录
网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...
- Phoenix踩坑填坑记录
Phoenix踩坑填坑记录 Phoenix建表语句 如何添加二级索引 判断某表是否存在 判断索引是否存在 Date类型日期,条件判断 杂项 记录Phoenix开发过程中的填坑记录. 部分原文地址:ph ...
- Kafka踩坑填坑记录
Kafka踩坑填坑记录 一.kafka通过Java客户端,消费者无法接收消息,生产者发送失败消息 二. 一.kafka通过Java客户端,消费者无法接收消息,生产者发送失败消息 在虚拟机上,搭建了3台 ...
- Linux踩坑填坑记录
Linux踩坑填坑记录 yum安装失败[Errno 14] PYCURL ERROR 6 - "Couldn't resolve host 'mirrors.aliyun.com'" ...
- React Native调试实用技巧,React Native开发者必会的调试技巧
在做React Native开发时,少不了的需要对React Native程序进行调试.调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率.本文将向大家分享React Na ...
随机推荐
- \r,\n,\r\n的区别
http://www.studyofnet.com/news/285.html \n是换行,英文是New line,表示使光标到行首\r是回车,英文是Carriage return,表示使光标下移一格 ...
- loj 1026( tarjan + 输出割边 )
题目链接:http://lightoj.com/volume_showproblem.php?problem=1026 思路:Tarjan 算法简单应用.割边的特点:low[v]>dfn[u]( ...
- Sublime text 2下alignment插件无效的解决办法
在sublime text 2中安装了alignment插件,但使用快捷键‘ctrl+alt+a'无效,经过各种方法依然无效,最后找到了这个“Doesn't work at all for me (f ...
- opengl混合效果
效果如下图:
- QUARTZ系列之一-基础概念(Scheduler/Job/JobDetail/Trigger)
摘抄自quartz官方文档: The key interfaces of the Quartz API are: Scheduler - the main API for interacting wi ...
- php利用simple_html_dom类,获取页面内容,充当爬虫角色
PHP脚本扮演爬虫的角色,可能大家第一时间想到可能会是会正则,个人对正则的规则老是记不住,表示比较难下手,今天工作中有个需求需要爬取某个网站上的一些门店信息 无意间在网上看到一个比较好的类库叫:sim ...
- canvas入门级小游戏《开关灯》思路讲解
游戏很简单,10行10列布局,每行每列各10盏灯,游戏初始化时随机点亮其中一些灯,点击某盏灯,其上下左右的灯及本身状态反转,如果点击前是灭着的,点击后即点亮,将所有灯全部点亮才算过关.游戏试玩: 下面 ...
- Spring DBCP用xml和properties2种格式配置DataSource
Spring提供数据库连接池:DBCP配置DataSource并且获取连接完成数据库操作: Spring帮助文档的地址: http://static.springsource.org/spring/d ...
- graphql 数据导入工具
graphql 是比 比较方便的工具,但是数据导入也是一个比较重要的工具类似prisma 包含一个seed 的功能,类似docker我们使用mysql 数据库的initdb.d,但是那个基本上就 是添 ...
- 使用Spring Boot,Spring Cloud和Docker实现微服务架构
https://github.com/sqshq/PiggyMetrics Microservice Architecture with Spring Boot, Spring Cloud a ...