开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合写东西,所以就留到今天总结了。因为这段时间在工作中陆陆续续的接触到了一些RN开发的东西,还是需要总结一下的。今天只是个开篇,接下来还会有陆陆续续的关于RN开发的总结,今天主要是环境搭建、简单的组件封装、Props和State的介绍,稍后还会更新布局、动画等一些开发中常用的东西。

虽然RN没有Release版、虽然Airbnb放弃了RN、虽然Facebook正在重构RN, 但是RN还是动态化比较好的选择方案的,还是要好好的搞一下RN的,当然也是工作中需要。既然要搞,就得认真呢,这篇是关于RN的第一篇博客,后续还会有其他关于RN的博客跟进的,也好在自己的学习历程中打个Tag。今天博客比较简单,是RN入门级别的,当然进阶的东西目前还没有接触过,等深入后再展开来记录吧。

RN官方文档(https://facebook.github.io/react-native/docs/getting-started

一、RN下的Hello World

接触一个新的东西那必须从HelloWorld开始呢,下方就一步步的从无到有搞一个RN的Hello World!

1、安装Node和VSCode

首先我们来搞一下Hello World前的准备工作,使用RN时,Node环境是必不可少的,如果你没有Node环境可以使用brew进行安装。(如果你还没安装Homebrew, 那么请Google自行安装)

brew install node

然后可以把node的源更新成taobao的镜像,这样访问速度会快一些。

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

装完Node后,然后就是选择安装一个开发RN的IDE了,当然你如果够强大,完全可以用记事本来编写RN的代码。当然用记事本是开玩笑的,可以用Sublime Text、Visual Studio Code等,如果比较土壕的程序员呢,你可以支持一下正版的Webstorm。当然想我这样“温饱都成问题”的程序猿,就只能用免费的VSCode了。

官方地址:https://code.visualstudio.com/

  

虽然本篇博客使用的VScode,但是平时开发中用WebStorm感觉还是挺爽的。

2、安装 exp

直接在模拟器上调试,依赖于exp这个App,下方这个命令就是安装exp。安装完后,会在模拟器上看到Expo这个App, 下方我们就会用到这个Expo。

npm install exp --global

   

  

3、create-react-native-app and run app

安装完Node后,使用Node的npm把create-react-native-app这个包装一下,可以快速的创建一个RN-Project。

  

然后使用create-react-native-app可以创建一个RN工程了,下方创建了一个名为MyFirstRNProject的RN工程。

  

创建完相关的RN工程成功后会有相关的提示,我们还是按照其提示的俩,使用 yarn start 来启动工程。

  

启动后,会让你选择相关的运行方式,因为本篇博客是在iOS环境下做的Demo,所有就直接选择 i 即可。

  

选择 i 后,就会启动模拟器中的Expo。可以用 command + D 来调用和隐藏开发调试面板。然后就会看到右边红框找那个的默认的文案。

   

我们可以将默认的文案改一下,然后修改一下样式,添加上我们的Hello World保存即可。因为默认Live Reload是打开的,所以当相关的文件被修改后,模拟器上的工程会自动Reload加载改动后的效果,具体如下所示:

    

在上面的代码中我们还需注意到下方定义了一个 styles 的常量,该常量是我们需要的样式对象。在RN中可以使用 StylesSheet.create()方法来创建我们需要的样式。改样式的定义规则与Web前端中的CSS差不多,使用方式页非常的相似。下方我们还会定义其他的样式表,稍后会介绍到。

二、使用TypeScript来开发RN

因为之前使用的另一个动态化的框架是用TypeScript来开发的,想在RN中也用TypeScript来开发,当然其默认的js语言的。在RN中支持TS开发,有相关的文档(https://github.com/Microsoft/TypeScript-React-Native-Starter

  

然后把工程中的App.js替换成App.tsx即可。(纯ts文件使用.ts来命名,有JSX的TS文件则使用tsx来做后缀),改完再次运行我们的Hello World即可。

  

三、自定义组件(Componet)、Props以及State

实现完HelloWorld后我们来看一下RN中组件封装的姿势,下方会封装一个HelloWorld的组件,然后在该组件的基础上看一下RN中Props和State的使用姿势。

1、HelloWorld组件封装

在RN中封装的组件都需要继承自 Component 类,然后在该类中正常的去添加相关布局和相关逻辑即可。下方我们将上述的HelloWorld进行了提取,创建了一个HelloWorld类,该类继承自React中的Component。然后在render()方法中通过JSX来添加需要渲染的各种组件,当然在我们的HelloWorld中,我们只用到了Text这个组件来展示文字。

封装的组件的使用姿势与RN提供组件的使用姿势是一样的,都是通过JSX的语法来引入使用的。下方 <HelloWorld /> 就是我们封装组件HelloWorld的使用姿势。

  

2、Props - 属性

属性,说白了就是一个组件负责接送外部参数的一个东西,类似于一个方法的参数。当然,如果你使用一个Function来定义一个组件的话,那么这个Props就是方法的参数。

在上面的HelloWorld的示例中,我们其实已经使用到了Props这个东西,只不过是系统自带的,比如上面为HelloWorld指定的 style 就是一个props, 该props传入的是一个样式对象。我们从Web前端的角度来说,属性这个东西应该是比较好理解的,div后边跟的key 和 value, 后边这个value就是相关key的属性。接下来我们将要介绍如何给自定义的组件添加特定的属性。

  

下方我们写了一个HelloWorld的组件,该组件继承与React中的Component,然后在render中渲染了一些组件,其中的Text是从属性Props中取的,从下方代码中看出,直接从Props中取相应的Key是可以取到的,不过强取值的话,会标红,会提示相关的熟悉在Props中不存在。稍后会解决该问题。

  

下方就是我们写的Hello Props组件,组件中的相关内容时通过Props中的相关key-value来传过来的。换句话说,Props就是一个传值的JSON串。

  

通常我们在开发中会为Props定义相关的类型,来声明Props中都有哪些东西,下方就是我们为上述的HelloWorld补的Props的类型,然后通过协议的形式指定给HelloWorld组件。从下代码我们看出,在Props类型后边还有一个null的类型,该类型是声明State的类型使用的。该处我们没有相关的状态,就暂且不指定,下方使用到的地方我们会给出相关的状态值。

添加完相关的类型声明后,之前下方标红的地方就不存在了。

  

3、State-状态

状态对应RN来说有着举足轻重的地位,整个RN的页面或者一个小的RN组件都可以看做是一个状态机,该状态机就是通过这个State来管理的。State中可以存放各种状态以及各种值,当这些值或者状态被修改时,那么这个组件节点就会被重新渲染,也就是更新页面或者组件。下方我们就为我们的HelloWorld添加上相关的State状态,然后通过该状态所对应的值做一些事情。

  • 声明State类型:首先我们像声明之前的Props类型一样声明了一个HelloWorldStateType的状态类型,然后HelloWorld组件中状态类型的位置设置了该类型。改类型中有一个属性,从状态属性我们不难看出是用来控制某个空是否展示白色的。
  • 初始State:我们指定状态类型后,该状态还需要一个初始状态,于是在构造器中对该状态进行了初始化。
  • 定时器修改状态:然后我们用定义了一个定时器,使用定时器来定时的修改状态的值,这样便于我们观察状态修改后的变化。定时器的作用就是“隔一秒改一下时间”(下方有个错别字,就不改了)
  • 最后就是在渲染的render方法中获取相关状态值进行使用了。该状态最终用来控制字体颜色的变化。

  

下方就是上述代码运行的相关效果,从下方的效果中不难看出,没个一秒文字的颜色会随着状态而修改。

  

今天博客就先到这儿,该做饭去了,下篇博客会总结一个RN中常用的布局方式。

ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State的更多相关文章

  1. React Native中组件的props和state

    一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...

  2. Android开发之旅:环境搭建及HelloWorld

    引言 本系列适合0基础的人员,因为我就是从0开始的,此系列记录我步入Android开发的一些经验分享,望与君共勉!作为Android队伍中的一个新人的我,如果有什么不对的地方,还望不吝赐教. 在开始A ...

  3. ReactNative环境搭建扩展篇——安装后报错解决方案

    之前一篇写了<逻辑性最强的React Native环境搭建与调试>说了RN的安装,今天在这里做一个复盘,让我们能够更直观更深入的了解React Native(以下简称RN),这一篇重点来说 ...

  4. windows下的react-native 开发环境搭建

    本教程用安卓手机作为演示. 首先安装jdk.本教程基于jdk1.8,安装时有一点要特别注意:jdk和jre必须装到不同目录下,否则初始化react-native项目时大概率报tools.jar not ...

  5. ReactNative学习笔记(一)环境搭建

    前言 本文开发环境为Windows,目标平台为Android,react-native版本为0.35.0. 环境搭建 注意,本文不是按照官网的教程来的,官网说必须安装什么Chocolatey,我懒得鸟 ...

  6. Cordova环境搭建 & HelloWorld

    目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...

  7. Scala深入浅出实战经典---001-Scala开发环境搭建和HelloWorld解析

    001-Scala开发环境搭建和HelloWorld解析 Scala 函数式编程和面向对象结合的语言 函数式编程擅长数值计算 面向对象擅长大型工程和项目的组织以及团队的分工协作 Scala会是下一个伟 ...

  8. 转:Android开发之旅:环境搭建及HelloWorld

    http://www.cnblogs.com/skynet/archive/2010/04/12/1709892.html 引言 本系列适合0基础的人员,因为我就是从0开始的,此系列记录我步入Andr ...

  9. Android开发-环境搭建以及HelloWorld

    最近开始进行Android的开发,没有基础完全从0开始.   首先,知道Android开发的官方网站: http://developer.android.com/index.html 网站本身教程非常 ...

随机推荐

  1. 五种开源协议(GPL,LGPL,BSD,MIT,Apache)介绍

    商业化的软件应该主要选用MIT或者Apache license的开源系统作为插件. 什么是许可协议? 什么是许可,当你为你的产品签发许可,你是在出让自己的权利,不过,你仍然拥有版权和专利(如果申请了的 ...

  2. Java 面试知识点解析(六)——数据库篇

    前言: 在遨游了一番 Java Web 的世界之后,发现了自己的一些缺失,所以就着一篇深度好文:知名互联网公司校招 Java 开发岗面试知识点解析 ,来好好的对 Java 知识点进行复习和学习一番,大 ...

  3. 点击<a>页面跳转解决办法/跨域请求,JSONP

    有些时候做的东西刚好要用到链接,但又不需要去链接,只需要对onclick事件进行处理,但它却这样子写 <a href="#" onclick="gettext()& ...

  4. sublime text3汉化

    注意在安装 sublime text3 时勾选Add to explorer context menu,这样在右键单击文件时就可以直接使用Sublime Text打开. 下载Package Contr ...

  5. (一)Servlet简介

    相关名词解释 HTML:Hyper Text Markup Language,超文本标记语言 HTTP:Hyper Text Transfer Protocol,超文本传输协议 URL:Uniform ...

  6. 自动化脚本中click()或sendKeys()没有反应

    前提: 排除xpath引用错误或元素的xpath每次都不同的情形. 问题描述 自动化脚本中click()方法和sendKeys()方法报错, 返回异常InvocationTargetException ...

  7. spring boot 搭建web项目常见五种返回形式

    在web项目中一般常见的五种返回形式: 返回页面,使用模板引擎,spring boot推荐使用thymeleaf,类似的还有freemarker等. 返回字符串(json),一般用于完全的前后端分离开 ...

  8. 1.1 为什么要使用lambda 表达式

    第1章 lambda 表达式 1.1 为什么要使用lambda 表达式 1.2 lambda 表达式的语法 1.3 函数式接口 1.4 方法引用 1.5 构造器引用 1.6 变量作用域 1.7 默认方 ...

  9. 一步一步理解 python web 框架,才不会从入门到放弃 -- 开始使用 Django

    背景知识 要使用 Django,首先必须先安装 Django. 下图是 Django 官网的版本支持,我们可以看到上面有一个 LTS 存在.什么是 LTS 呢?LTS ,long-term suppo ...

  10. 【缩点+拓扑判链】POJ2762 Going from u to v or from v to u?

    Description In order to make their sons brave, Jiajia and Wind take them to a big cave. The cave has ...