react native 全局变量的使用

朴灿烈づ我的快乐病毒、 2022-05-19 08:52 196阅读 0赞

## RN中有两种方式使用全局变量 ##

### 1.通过导入导出文件的方式 ###

新建constants.[js][]文件

1.  `const object = {`
2.  `website:'http://www.baidu.com',`
3.  `name:'百度',`
4.  `};`
5.  `export default object;`

需要用到的时候导入文件

1.  `import constants from './constansts.js'`
2.  `<Text>{constants.name}</Text>`

还可以有另外一种导入文件的写法

1.  `export default {`
2.  `website:'http://www.baidu.com',`
3.  `name:'百度',`
4.  `};`

### 2.通过声明全局变量的方式 ###

一定是先声明，后调用。

1.  `global.a = 1;`
2.  `<Text>{a}</Text>`

也可以专门写在一个文件当中。

1.  `global.constants = {`
2.  `website:'http://www.baidu.com',`
3.  `name:'百度',`
4.  `};`

调用方法，入口文件一次调用（比如index.[iOS][].js文件），全局使用。

1.  `import './constants.js';`
2.  `<Text>{global.constants.name}</Text>`

版权声明：本文为博主原创文章，未经博主允许不得转载。 [https://blog.csdn.net/daniel1227/article/details/81170776][https_blog.csdn.net_daniel1227_article_details_81170776]

[js]: http://lib.csdn.net/base/javascript
[iOS]: http://lib.csdn.net/base/ios
[https_blog.csdn.net_daniel1227_article_details_81170776]: https://blog.csdn.net/daniel1227/article/details/81170776

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

相关 React Native添加自定义全局组件

> 在开发rnApp的时候想自己封装一个自定义的Toast组件，又不想在每个组件文件内单独引用，于是自己琢磨了一个方法将组件添加到全局。这里举例封装一个自定义的Toast组

心已赠人/ 2023年07月09日 10:29/ 0 赞/ 41 阅读

相关【React-native】React-native键盘遮挡TextInput，使用 KeyboardAvoidingView 解决

所有APP都有表单提交，键盘是千万不能遮挡的，而且在最后一项输入的时候，底部的【提交/登录】按钮需要弹上来显示安装插件： npm i react-native

缺乏、安全感/ 2023年07月07日 11:15/ 0 赞/ 28 阅读

相关【React Native进阶】React Native Gesture Handler的使用

背景说到React Navtive的性能优化，首先要了解React Native的运行机制。React Native程序主要运行在三个并行的线程上： JS Th

悠悠/ 2022年12月28日 09:05/ 0 赞/ 394 阅读

相关 React-Native 安装使用

React-Native 安装使用 1、首先运行 cmd +r ，输入： @powershell -NoProfile -ExecutionPolicy B

Love The Way You Lie/ 2022年07月16日 15:14/ 0 赞/ 183 阅读

相关 react-native

react-native 资料整理： react-native官网：[http://facebook.github.io/react-native/][http_faceb

た入场券/ 2022年07月10日 04:56/ 0 赞/ 271 阅读

相关 react-native 之 ref 的使用

react-native 之 ref 的使用，在react-native中可以通过 ref属性来获取[组件][Link 1]，并设置组件的属性及其方法，实例如下 <table

太过爱你忘了你带给我的痛/ 2022年06月01日 01:22/ 0 赞/ 524 阅读

相关 React Native——react-navigation的使用

在 `React Native` 中，官方已经推荐使用 `react-navigation` 来实现各个界面的跳转和不同板块的切换。 `react-navigation` 主

向右看齐/ 2022年05月23日 05:42/ 0 赞/ 212 阅读

相关 react native 全局变量的使用

RN中有两种方式使用全局变量 1.通过导入导出文件的方式新建constants.[js][]文件 1. `const object = {` 2. `web

朴灿烈づ我的快乐病毒、/ 2022年05月19日 08:52/ 0 赞/ 197 阅读

相关 React-Native 数据存储之react-native-storage的简单使用

`react-native-storage`是封装好的数据存储组件，安装方法见：[https://github.com/sunnylqm/react-native-storag

布满荆棘的人生/ 2022年03月06日 16:12/ 0 赞/ 610 阅读

相关 React-native 图标的使用

[无广告浏览>>][Link 1] npm install --save react-native-vector-icons // 下载库 react-nat

小灰灰/ 2021年08月13日 21:30/ 0 赞/ 398 阅读