React Native工作小技巧及填坑记录

时间:2022-09-07 10:03:08

以下是本人在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工作小技巧及填坑记录的更多相关文章

  1. iOS工作小技巧及填坑记录

    以下是本人在iOS开发工作中使用的一些小技巧,记录一下. 1.使用XXX.pch文件便捷开发+加速Build 在IOS开发的项目中有一个XX_Prefix.pch XX_Prefix.pch:扩展名. ...

  2. 微信小程序开发技巧及填坑记录

    以下是自己在开发过程中遇到的坑和小技巧,记录以下: 1.出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add pag ...

  3. React Native 导入原生Xcode项目总结与记录

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  4. webapp填坑记录&lbrack;更新中&rsqb;

    网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...

  5. webapp填坑记录

    网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...

  6. Phoenix踩坑填坑记录

    Phoenix踩坑填坑记录 Phoenix建表语句 如何添加二级索引 判断某表是否存在 判断索引是否存在 Date类型日期,条件判断 杂项 记录Phoenix开发过程中的填坑记录. 部分原文地址:ph ...

  7. Kafka踩坑填坑记录

    Kafka踩坑填坑记录 一.kafka通过Java客户端,消费者无法接收消息,生产者发送失败消息 二. 一.kafka通过Java客户端,消费者无法接收消息,生产者发送失败消息 在虚拟机上,搭建了3台 ...

  8. Linux踩坑填坑记录

    Linux踩坑填坑记录 yum安装失败[Errno 14] PYCURL ERROR 6 - "Couldn't resolve host 'mirrors.aliyun.com'&quot ...

  9. React Native调试实用技巧,React Native开发者必会的调试技巧

    在做React Native开发时,少不了的需要对React Native程序进行调试.调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率.本文将向大家分享React Na ...

随机推荐

  1. &bsol;r&comma;&bsol;n&comma;&bsol;r&bsol;n的区别

    http://www.studyofnet.com/news/285.html \n是换行,英文是New line,表示使光标到行首\r是回车,英文是Carriage return,表示使光标下移一格 ...

  2. loj 1026&lpar; tarjan &plus; 输出割边 )

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1026 思路:Tarjan 算法简单应用.割边的特点:low[v]>dfn[u]( ...

  3. Sublime text 2下alignment插件无效的解决办法

    在sublime text 2中安装了alignment插件,但使用快捷键‘ctrl+alt+a'无效,经过各种方法依然无效,最后找到了这个“Doesn't work at all for me (f ...

  4. opengl混合效果

    效果如下图:

  5. QUARTZ系列之一-基础概念(Scheduler&sol;Job&sol;JobDetail&sol;Trigger)

    摘抄自quartz官方文档: The key interfaces of the Quartz API are: Scheduler - the main API for interacting wi ...

  6. php利用simple&lowbar;html&lowbar;dom类,获取页面内容,充当爬虫角色

    PHP脚本扮演爬虫的角色,可能大家第一时间想到可能会是会正则,个人对正则的规则老是记不住,表示比较难下手,今天工作中有个需求需要爬取某个网站上的一些门店信息 无意间在网上看到一个比较好的类库叫:sim ...

  7. canvas入门级小游戏《开关灯》思路讲解

    游戏很简单,10行10列布局,每行每列各10盏灯,游戏初始化时随机点亮其中一些灯,点击某盏灯,其上下左右的灯及本身状态反转,如果点击前是灭着的,点击后即点亮,将所有灯全部点亮才算过关.游戏试玩: 下面 ...

  8. Spring DBCP用xml和properties2种格式配置DataSource

    Spring提供数据库连接池:DBCP配置DataSource并且获取连接完成数据库操作: Spring帮助文档的地址: http://static.springsource.org/spring/d ...

  9. graphql 数据导入工具

    graphql 是比 比较方便的工具,但是数据导入也是一个比较重要的工具类似prisma 包含一个seed 的功能,类似docker我们使用mysql 数据库的initdb.d,但是那个基本上就 是添 ...

  10. 使用Spring Boot&comma;Spring Cloud和Docker实现微服务架构

    https://github.com/sqshq/PiggyMetrics     Microservice Architecture with Spring Boot, Spring Cloud a ...