ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State

开篇呢，先给你们问个好，今天是中秋节，祝你们中秋节快乐！！虽然是中秋节，可是木有回家仍是总结一下知识点写写博客吧，想着昨天总结一下的，可是昨天和几个同窗小聚了一下，酒逢知己老是千杯少呢，喝的微醺不适合写东西，因此就留到今天总结了。由于这段时间在工做中陆陆续续的接触到了一些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）

 

1、RN下的Hello World

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

一、安装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感受仍是挺爽的。

 

二、安装 exp

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

npm install exp --global

 　　 

  

三、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差很少，使用方式页很是的类似。下方咱们还会定义其余的样式表，稍后会介绍到。

 

 

2、使用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便可。

　　

 

  

 

3、自定义组件（Componet）、Props以及State

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

一、HelloWorld组件封装

在RN中封装的组件都须要继承自 Component 类，而后在该类中正常的去添加相关布局和相关逻辑便可。下方咱们将上述的HelloWorld进行了提取，建立了一个HelloWorld类，该类继承自React中的Component。而后在render()方法中经过JSX来添加须要渲染的各类组件，固然在咱们的HelloWorld中，咱们只用到了Text这个组件来展现文字。

封装的组件的使用姿式与RN提供组件的使用姿式是同样的，都是经过JSX的语法来引入使用的。下方 <HelloWorld /> 就是咱们封装组件HelloWorld的使用姿式。

　　

 

二、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的类型使用的。该处咱们没有相关的状态，就暂且不指定，下方使用到的地方咱们会给出相关的状态值。

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

　　

 

  

三、State-状态

状态对应RN来讲有着举足轻重的地位，整个RN的页面或者一个小的RN组件均可以看作是一个状态机，该状态机就是经过这个State来管理的。State中能够存放各类状态以及各类值，当这些值或者状态被修改时，那么这个组件节点就会被从新渲染，也就是更新页面或者组件。下方咱们就为咱们的HelloWorld添加上相关的State状态，而后经过该状态所对应的值作一些事情。

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

　　

 

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

　　

 

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