reactNative 组件

最新推荐文章于 2024-06-06 09:55:14 发布

原创最新推荐文章于 2024-06-06 09:55:14 发布 · 338 阅读

0 ·

CC 4.0 BY-SA版权

react native 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了React Native中的组件实现方式、生命周期方法及状态管理等核心概念，并提供了ES6特性的应用示例，帮助开发者更好地理解和使用React Native。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

reactNative

组件的实现方式：

1，ES6：推荐

2，ES5：

3，函数式组件：无状态的，不能使用this；属性是通过参数传递

组件的生命周期：

从创建开始到被卸载结束；

生命周期方法和三种生命周期状态：

getDefaultProps：es6，定义组件的默认属性（es6 使用static defaultProps方法）

组件装载时的状态：mounting

对应生命周期方法：

getInitialState：定义组件的初始化（es6 使用 constructor（props）方法）

componentWillMount：组件被调用之前加载此方法，

Render：完成组件的渲染

componentDidMount：表示组件已经渲染完成了

组件更新时的状态：updating

对应生命周期方法：

componentWillReceiveProps（nextProps）：组件的属性发生改变时会调用此方法

shouldComponentUpdate（nextProps, nextState）：询问是否需要重新渲染组件

componentWillUpdate（nextProps, nextState）：需要重新渲染组件时调用此方法

render：再次渲染

componentDidUpdate（nextProps, nextState）：渲染完成调用此方法

组件卸载时的状态：unmounting

对应生命周期方法：

componentWillUnmount：页面关闭时调用此方法，表示页面将被卸载，执行资源回收，释放的操作

链接：https://www.race604.com/react-native-component-lifecycle/

常量与变量的声明、导入和导出：

Var——>变量

Const——>常量

类的导出：在class前加export default

类的导入：import 类名 from ‘类的路径’

变量和常量的导出：方式一:在var前加export

方式二：变量声明完成后，export{变量名,...}用来批量导出

变量和常量的导入：在类导入的后面增加常量和变量；

import 类名,{常量或变量名,...} from ‘类的路径’

Props：

创建：在view内使用：{this.props.name}

创建一个static方法来设置props的默认值，

通过PropTypes来检测传递来的props值的类型是否正确

传递：

有三种使用方式：

1，直接使用：name={‘小明’}

2，使用延展操作符的形式：

首先创建一个集合：var params = {name: 'TEXT:', result: 888888}

使用时：{...params}，这种方式是使用集合内所有的keyValue

3，使用结构赋值的方式：

首先创建一个集合：var params = {name: 'TEXT:', result: 888888}

把需要使用的值放在新的代码式内：var {name} = params

使用时：name={name}

State

初始化有两种方式：1，通过constructor(){this.state={name:’小明’}}

2，直接state={name:’小明’}

小贴士：导入文件reload会报错，关掉包管理器，重新run一下就好了；

React Native ref

组件的一个特殊属性，组件被渲染后，指向组件的一个引用，通过ref的属性获取真实的组件；

Ref的使用：

第一种方式：

首先给一个组件设置ref属性（<RefTest ref={'reftest'}/>），然后在另外的组件上进行显示通过this.refs.reftest或者this.refs[‘reftest’]来获取这个组件的实例，调取这个实例的方法或变量（var size = this.refs.reftest.getSize()）

第二种方式：

首先直接在给组件设置ref属性的时候，设置组件的实例（ref={imgSize => this.imgSize = imgSize}），然后在另外的组件上进行显示通过this.imgSize这个实例来调取内部方法和变量（var size =this.imgSize.getSize()）

小贴士：RN的对象是以链式方式调用的；

ES6的特性

1，类：

2，模块：ES6中，模块作为重要组成部分被添加进来，模块的功能主要有export（导出）和import（导入）相关联；

3，箭头（Arrow）函数：（带参数或不带参数的括号）=>{表达式（作为函数的返回值）}

①关键字function的缩写；

②与包围它的代码共享同一个this

表达式类型：()=>1

v=>v+1

(a,b)=>a+b

()=>{alert(‘foo’);}

e=>{if(e==0){return 0;}return 1000/e;}

4，ES6不再支持Mixins：可以通过增强组件的方式来替代Mixins（用一个增强组件为某个类增加一些方法，并且返回一个新类，无疑是能实现mixins所实现的大部分需求）

5，ES6不再支持自动绑定：需要通过bind或者箭头函数来手动绑定this引用。

<div onClick={this.tick.bind(this)}> 通过bind绑定this

<div onClick={()=>this.tick()}> 通过使用箭头函数来绑定

6，ES6添加 static关键字：通过static关键字定义一个类函数

//将formatName定义为类函数

Static formatName(name){return name[0].toUpperCase()+name.sustr[1].toLowerCase();}

ES6和ES5的区别

1，在定义方面的不同：在定义组件、属性和方法等方面

2，在导入与导出组件上的不同

3，在初始化state上的不同

4，在方法作为回调上的不同

React Native 布局

父容器视图属性

1，flexDirection：row：从左到右依次排列

column(default)：从上到下排列

row-reverse：从右到左依次排列

column-reverse：从下到上依次排列

2，flexWrap：wrap：一列排不下时自动换行

Nowrap：只排在一列，可能导致溢出

3，justifyContent(主轴（横）)：

flex-start：从行首开始排列，每行第一个弹性元素与首行对齐，同时所以后续的弹性元素与前一个对齐

flex-end：从行位开始排列，每行最后一个元素与行尾对齐，其他元素将与后一个对齐

center：伸缩元素向每行中点排列，每行第一个元素到行首的距离与每行最后一个元素到行尾的距离相同

space-between：每行均匀分配弹性元素，相邻元素间距相同，每行第一个元素与行首对齐，最后一个元素和行尾对齐

space-around：每行均匀分配弹性元素，相邻元素间距相同，每行第一个元素到行首的距离和每行最后一个元素到行尾的距离是相邻元素之间距离的一半

4，alignItems(侧轴（竖）)：

flex-start：元素向侧轴起点对齐（最上面的点）

flex-end：元素向侧轴终点对齐

Center：元素在侧轴居中，(元素在侧轴上的高度高于其容器，那么在两个方向的溢出距离相同)

stretch：弹性元素在侧轴方向被拉伸到与容器相同的高度或宽度

子视图属性

1，alignSelf：auto(default)：元素继承父容器的alignItems属性，如果没有父容器则为stretch

stretch：元素被拉伸以适应容器

center：元素位于容器的中心

flex-start：元素位于容器的开头

flex-end：元素位于容器的结尾

2，Flex：可伸缩元素的能力。元素在父容器的权重比。

视图的边框

borderBottomWidth底部边框宽度

borderLeftWidth左边边框宽度

borderRightWidth右边边框宽度

borderTopWidth顶部边框宽度

borderWidth边框宽度

borderColor边框颜色

borderRadius边框半径

尺寸

width

height

外边距

margin 外边距

marginBottom下外边距

marginHorizontal 左右边距

marginLeft 左外边距

marginRight 右外边距

marginTop 上外边距

marginVertical 上下外边距

内边距是padding

边缘上top下bottom左left右right

定位position：absolute生成绝对定位的元素

Relative生成相对定位的元素(默认)

ReactNative按钮的使用

TouchableWithoutFeedback:没有点击效果

TouchableHighlight:按下时背景会变暗

TouchableOpacity:按下时降低按钮的透明度

TouchableNativeFeedback:按下时有水波纹的效果，（android专属）

reactNative的按钮组件都是父控件内部只支持一个组件，后面三种组件都是在TouchableWithoutFeedback基础上做的扩展；

按钮的属性：onPress(单击)，onLongPress(长按)，disabled（设为true，则禁止此组件的一切交互），onPressIn(单击开始时的回调)，onPressOut(单击结束时的回调)

TouchableHighlight扩展出来的属性：activeOpacity（被按下时的不透明度，默认0.85）

underlayColor：（被按下去的颜色，默认黑色），onHideUnderlay（最外层的view被隐藏的时候调用（一般当点击结束时最外层view会被隐藏）），onShowUnderlay（最外层view显示的时候调用），style(最外层添加了一个view所以可以设置这个view的样式来生成形形色色的按钮)

TouchableOpacity扩展出来的属性：activeOpacity（按下时透明度的改变）

TouchableNativeFeedback扩展出来的属性：background（接收一个有type属性和一些基于type属性的额外数据的对象（TouchableNativeFeedback.SelectableBackground()android默认的背景）（TouchableNativeFeedback.SelectableBackgroundBorderless()默认的无边框对象的背景，只适用android apilevel 21+）（TouchableNativeFeedback.Ripple(color，borderless)被按下时有涟漪状的背景borderless为true，效果会渲染到视图的范围之外，android5.0以上的））