下方就是我们写的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中常用的布局方式。