React Native编译器的配置以及基础知识
入职新公司,这边打算采用RN来写界面,所以学习一波这一块的知识。
采用的是WebStorm来编译,据同事说,比他采用atom编译要多很多语法提示。
下载地址:https://www.jetbrains.com/webstorm/
安装之后需要破解:http://blog.csdn.net/zhalcie2011/article/details/57409082
进入WebStorm,进行基础配置,诸如RN语法高亮等:http://blog.csdn.net/xiangzhihong8/article/details/52293896
语法提示插件:https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
配置完成之后,RN相关Api、关键字等都有提示,算是比较友好了。
RN项目基础配置
import React, {Component} from 'react'; import
{
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import与iOS一致,是导入组件or面向组件,其中默认组件是不需要{}包裹起来的,比如说React,但是Component、Appregistry、Text等组件都是非默认组件,所以需要用{}包裹起来。
class MyApp extends Component {
render() {
var str = 'ppppppppppppppp';
return ( <View style={{backgroundColor: 'red', flex: 1}}>
<Text style={{flex: 1}}>{str}</Text>
</View>
)
}
}
上面的代码是自定义程序入口组件,类似于[[UIView alloc] init],当一个组件要显示的时候,就会自动调用render方法,渲染组件。extends关键字意味着继承自哪个类,这是ES6的语法,建议在看RN具体代码时,过一遍JS与ES6的语法。
我在学习的时候,有一点总是弄不清楚,不知道什么时候要加{},什么时候不加;也不知道什么时候加(),什么时候不加?
1、包装对象的时候使用{},在JS中,对象就是这么写的 {x: 100, y: 100, method: function() {} }
2、表达式都需要使用{},在上述的代码中,<View style={}..... 这就是一个赋值表达式,所以需要一个{},那么为什么{}里面还有{}呢?{flex: 1}这是个对象了,所以需要{}包裹起来
3、变量也需要用{}包裹起来,比如上面的<Text style={{flex: 1}}>{str}</Text>中str是个变量,所以包裹起来显示,如果不包裹,那么text就是直接显示str。
4、在包裹组件标签的时候,必须使用(),上面return () 里面的代码,就是组件标签。
var styles = StyleSheet.create({
font: {
fontWeight: 'bold',
color: 'green',
fontSize: 14,
},
});
上面是样式表、组件外观等配置。也可以直接像html那般,写在组件里面,例如:<View style={{backgroundColor: 'red', flex: 1}}>。
AppRegistry.registerComponent('MyApp', ()=> MyApp);
注册程序入口组件,注册哪个组件、程序启动的时候就会自动去加载注册组件。
第一个参数:模块名称,随意填,但是必须与iOS模块名称一致,负责会报找不到组件入口的错误,这里的模块名是'MyApp'
第二个参数:函数,箭头函数ES6的语法,需要返回组件类名。
(箭头函数:=> 左边:函数参数,右边:函数返回值)
在学习过程中,没有感觉到RN的布局有什么困难的地方,就不记录了,下次更新prop与state、传值等知识。
React Native编译器的配置以及基础知识的更多相关文章
- 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 【RL-TCPnet网络教程】第25章 DHCP动态主机配置协议基础知识
第25章 DHCP动态主机配置协议基础知识 本章节为大家讲解DHCP(Dynamic Host Configuration Protocol,动态主机配置协议),通过前面章节对TCP和UDP ...
- Mac电脑配置IOS React Native开发环境配置笔记
React Native(以下简称RN)的开发环境配置直接参考官方文档即可完成,不过对小白来说东西有点多,有些名词不是很好理解,这里就官方的安装文档稍微展开说一下. 中文版配置说明:不错的中文说明.官 ...
- windows 下android react native详细安装配置过程
写在前面: 在网上搜了很多安装配置文档,感觉没有一个真的跟我安装的过程一模一样的,东拼拼西凑凑,总算是装好了,我不会告诉你,断断续续,我花了两天时间...一到黑屏报错就傻眼,幸好在react群里遇到了 ...
- 深入浅出React Native 1: 环境配置
该教程主要介绍如何用react native来开发iOS,所以首先,你需要有一台mac,当然黑苹果也是可以的~ 创建一个react native的项目只需要安装以下五个组件~~(但....坑爹的是,不 ...
- LAMP配置课程基础知识详解
听了一天的课程,我本人对这个还是很感兴趣的. [root@localhost~]# root 用户名 localhost 本地 ~ 家目录 不同用户不同 #当前用户是管理员 $当前用户是普通 ...
- React Native环境配置和简单使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
- Webstorm配置运行React Native
Webstorm配置运行React Native 1.选择配置 2.选择npm,设置package等参数 3.添加拓展工具 4.配置拓展工具(核心啊) 5.运行测试,ok的.
- React Native iOS环境搭建
前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...
随机推荐
- python 解析docx文档的方法,以及利用Python从docx文档提取插入的文本对象和图片
首先安装docx模块,通过pip install docx或者在docx官方链接上下载安装都可以 下面来看下如何解析docx文档:文档格式如下 有3个部分组成 1 正文:text文档 2 一个表格. ...
- Java IO学习笔记五
管道流 管道流的主要作用是可以进行两个线程间的通讯,分为管道输出流(PipedOutputStream).管道输入流(PipedInputStream),如果想要进行管道输出,则必须要把输出流连在输入 ...
- CSS设置一行文字,超出部分自动隐藏
.textone { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 25px; max-h ...
- 关于MATLAB处理大数据坐标文件2017528
第一次提交数据 增加了部分特征 3000数据测试中得分99 但是10万数据出现过拟化现象,正确率下降 总结:1.某些特征数据本身波动不大应该考虑放弃 2.一些特征虽然表面觉得差异显而易见,但是数据表达 ...
- CoolBlog开发笔记第4课:数据库模型设计
教程目录 1.1 CoolBlog开发笔记第1课:项目分析 1.2 CoolBlog开发笔记第2课:搭建开发环境 1.3 CoolBlog开发笔记第3课:创建Django应用 前言 我新书<Py ...
- 开源框架GreenDao的操作
1.为什么需要GreenDao?Google原生API不方便 @1手动组拼SQL语句 @2需要自己写操作数据库代码 @3不能把数据库中的数据映射成对象 @4没有实现关联查询 2.GreenDao是什么 ...
- 如何设计相对安全的cookie自动登录系统
很多网站登录的时候,都会有一个"记住我"功能,用户可以在限定时间段内免登录, 比如豆瓣.人人.新浪微博等都有这种设计.这种技术其实就是基于 cookie的自动登录, 用户登录的时候 ...
- 【Android Developers Training】 78. 序言:执行网络操作
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- JAVA基础——类和对象
java类与对象学习笔记 一.成员变量和局部变量 (1)定义 1.成员变量 在类中定义,用来描述对象将要有什么.(默认的成员变量值为0) 2.局部变量 在类的方法中定义,在方法中临时保存数据. 演示示 ...
- IBM Security AppScan Standard 用外部设备录制脚本(手机端应用、app、微信等)进行安全测试
一.打开AppScan,选择外部设备/客户机,点击下一步 二.记录代理设置,可以手动输入需要的端口号,也可以自动选择,记住端口号以及PC电脑的ip地址,手机端如何设置对应的端口跟ip可以参考 Jmet ...