以下是本人在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填坑记录[更新中]

    网上也有许多的 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'" ...

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

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

随机推荐

  1. H5一行显示两个正方形

    1)有时候一些图片会是正方形或者长方形,对于这样的图片一般都是居中显示到正方体内,代码如下:  .exhibition_list img{width:100%;position: relative;t ...

  2. [原创]C#应用WindowsApi实现查找\枚举(FindWindow、EnumChildWindows)窗体控件,并发送消息。

    首先介绍基本WindowsApi: public static extern IntPtr FindWindow(string lpClassName, string lpWindowName); 函 ...

  3. 基于KEIL4开发ARM9(S3C2440)的裸机程序

    本文主要介绍如何使用Keil4开发ARM9(S3C2440)裸机程序. 说明: 一.平台: 操作系统:Windows XP系统 KEIL版本:4.73 开发板:ARM9(S3C2440) 二.建立工程 ...

  4. Shell父进程获取子进程的变量值

    #!/bin/kshshit=""export shitshit=$(su - grid -c 'echo $ORACLE_BASE')pvar=$(subvar="he ...

  5. 认识WCF

    WCF 一.什么是WCF? 1.Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口.它是.NET框 ...

  6. jquery点击获取子元素ID值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Informatica相同环境与不同环境的导入导出( Repository Name,Integration Service Name,Folder Name是否相同):

    Informatica相同环境与不同环境的导入导出( Repository Name,Integration Service Name,Folder Name是否相同): 1.repository N ...

  8. 2.4G/5G频段WLAN各国使用信道表

    List of WLAN channels (维基百科):https://en.wikipedia.org/wiki/List_of_WLAN_channels 2.4G 5G 另附美国5G允许使用的 ...

  9. Visual Studio 2015 Update 2

    Visual Studio Community 2015(带Update2)(社区版,针对个人免费): 简体中文版 || SHA1:待更新 繁体中文版 || SHA1:待更新 英文版 || SHA1: ...

  10. 《2---关于JDBC编程过程中驱动配置问题》

    说明:我在Editplus中编写了一个简单的JDBC程序,用来测试是否和数据库连接正确.读者如有其它疑问,可以留言交流. [1]程序如下: import java.sql.*; public clas ...