10.React Native之常量、变量、组件；

最新推荐文章于 2024-10-12 15:09:38 发布

原创最新推荐文章于 2024-10-12 15:09:38 发布 · 3.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#React.js #基础

React Native 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了React Native中的变量定义，包括代码块变量、成员变量、常量、全局变量（导出和导入的方式、声明全局变量）和静态变量。此外，还讨论了组件定义和特定平台代码的编写，为开发者提供了一站式的参考指南。

1.变量定义

1.1代码块变量

代码块变量的作用域主要在方法内部，外部无法访问代码块变量，在ES6通常用let命令定义，示例如下：

1.2成员变量

成员变量主要在整个类(Component)内部都可以访问，通常在constructor方法中定义成员变量同时为成员变量赋值，示例如下：

export default class TabOne extends Component{
    constructor(props){
        super(props);
        //定义成员
        this.userid='123';  //成员变量
        this.state = {'cartype':'吉利金刚'};    //成员变量
    }

    render(){
        return (<View style={styles.container}>
            <Text>检测</Text>
            <Text>userid：{this.userid}</Text>   //访问成员变量
            <Text>cartype：{this.state.cartype}</Text>   //访问成员变量
        </View>);
    }
}

1.3常量(const)

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

正确和错误使用示例：

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

//定义常量
const constone = {};
export default class TabOne extends Component{
    constructor(props){
        super(props);
        //只修改常量属性值
        constone.propone = 1;
    }

    render(){
        return (<View style={styles.container}>
            <Text>检测</Text>
            //显示常量属性值
            <Text>constone：{constone.propone}</Text>
        </View>);
    }
}

1.4全局变量

全局变量就是整个源程序都有效的变量。全局变量存储在全局数据区中，它的生命周期和主程序一样，随程序的销毁而销毁。全局变量需要先声明后使用，声明后的全局变量在程序的各个部分都可以使用。

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

1.4.1导出和导入的方式

a.ES5导出的方式

新建Global.js;

导出module.exports = NetAddr

var host='http://www.baidu.com';
var NetAddr = {
    RegisterUser:host+'/login/registerUser'
}
module.exports = NetAddr

bES6导出的方式

新建Global.js;

直接导出 export default {RegisterUser:host+'/login/registerUser'}

var host='http://www.sohu.com';
// var NetAddr = {
//     RegisterUser:host+'/login/registerUser'
// }
// module.exports = NetAddr
export default {RegisterUser:host+'/login/registerUser'}

导入调用方式

import Global from './Global'
render(){
        return (<View style={styles.container}>
            <Text>全局变量值：{Global.RegisterUser}</Text>
        </View>);
    }

1.4.2声明全局变量

（nodejs中的global对象：用于定义整个runtime时期的全局变量）

新建文件Variables.js:

global.Variables={language: 'English'}

入口文件（比如App.js文件）导入，全局使用

import './Variables.js';

{global.Variables.language} //获取全局变量的值

1.5静态变量

静态变量定义

static staticdefine = 123;

静态变量引用

TabOne.staticdefine（类名.变量名）

export default class TabOne extends Component{
    static staticdefine = 123;
    constructor(props){
        super(props);
    }

    render(){
        return (<View style={styles.container}>
            <Text>静态变量：{TabOne.staticdefine}</Text>
        </View>);
    }
}