React-Native使用全局变量踩坑记

在React native开发中，经常需要获取屏幕宽高设置布局，或者是取屏幕宽高百分比设置布局。

通常做法都是创建一个工具文件比如utils.js，然后在工具文件中提前把屏幕宽高取出来，再创建一个get方法来获取对应的值。如此我们在哪里使用就需要在哪里导入utils.js,再执行get方法获取对应的值。

如果有一百个地方使用屏幕宽高，那就需要导入100次，再get100次方法！

思来想去上面做法太鸡肋，有什么办法让我们只需获取一次，终身享用呢？

当然有！

此刻该我们的主角Global闪亮登场了。

屏幕宽高是个固定值我们完全可以在初始化的时候获取，然后存起来，之后赋值给一个全局变量。

既然是全局变量，那全世界人民都能用到它，想在哪里用就在哪里用，妈妈再也不用担心我天天get去拿值。

有了思路直接开干!

START

先创建一个constant.js,专门负责初始化全变量（全局变量的值也就是我们认定的常量值），然后在项目的入口文件第一行先导入constant.js。

导入constant.js记得加上注释。重要的事情说三遍：

1：在项目入口文件导入constant.js地方加上注释!

2：在项目入口文件导入constant.js地方加上注释!

3：在项目入口文件导入constant.js地方加上注释!

加上注释是为了防止刚接触这块代码的人看到这个导入，没有地方使用，而误以为是没有用处的代码，顺手把它删除。

搞完之后我们就可以“肆意妄为”了，在代码中有用到屏幕宽高的地方我们都可以直接使用width和height变量来作为屏幕的宽高，再也不需要先导入再get才能拿到屏幕的宽高值。

此刻心情是不是有种，想要飞一样的感觉——

Write once Use anywhere！

同样我们可以把项目中所有常量都在constant.js中初始化且挂载到Global上，比如平台，iphoneX， iphoneXR的判断 ，导航栏StatusBar的高度等等。如下：

为了避免和项目中其它人定义的变量名冲突或者是React native提供的全局变量名冲突，我会在全局变量前面加上项目缩写，比如上面加wb，使用_也可以，看个人习惯。

constant.js里面不仅仅可以放变量，我们还可以把项目中大量重复使用的方法放到它里面，例如屏幕适配方法，每个设置UI宽高的地方都要用到次此方法，如下：

nice，把大伙都凑到一起，我们就可以项目里面‘为所欲为’了。

完成项目中所有常量在constant.js中初始化后，可能有人就会问，我能不能把变量也放到Global上？答案当然是可以的，只是Global一脸嫌弃。

通常我个人喜欢把请求接口使用到的token也放到Global上，在用户登陆之后对Global中存放token变量进行赋值。如果公司token是时刻刷新的，也就需要我们时刻刷新存放token的全局变量的值。

到这里有人可能会有顾虑，Global中的变量任何地方都能使用，任何地方都能随意修改，一旦出现bug，那问题追踪岂不是要了老命？

确实是如此，大家在项目中任何地方都随意修改全局变量中的值，问题追踪真的会要我们半条老命。

所以坚决不推荐把经常修改的变量挂载到Global中以及禁止项目成员随意修改Global中的值。

在Spring Boot中约定优于配置，类似我们在使用Global变量的时候需要严格遵守上述约定，不然会物极其反 ，只有遵守了约定，才能更好发挥Write once Use anywhere。