欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-04-18 23:05:30
开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合写东西,所以就留到今天总结了。因为这段时间在工作中陆陆续续的接触到了一些RN开发的东西,还是需要总结 ......

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

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

rn官方文档(

 

一、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了。

官方地址:

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

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

 

2、安装 exp

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

npm install exp --global

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

  

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

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

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

 

 

二、使用typescript来开发rn

因为之前使用的另一个动态化的框架是用typescript来开发的,想在rn中也用typescript来开发,当然其默认的js语言的。在rn中支持ts开发,有相关的文档(https://github.com/microsoft/typescript-react-native-starter

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

 

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

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

 

  

 

三、自定义组件(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的使用姿势。

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

 

2、props - 属性

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

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

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

 

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

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

 

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

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

 

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

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

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

 

  

3、state-状态

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

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

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

 

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

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

 

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