一. Touchable系列组件
-
RN的组件基本上默认都是不支持点击事件，也不能响应基本触摸事件
-
不透明触摸TouchableOpacity
-
该组件封装了响应触摸事件，当点击按下的时候，该组件的透明度会降低
-
常用属性
activeOpacity number
设置组件在进行触摸的时候，显示的不透明度(取值0-1之间)onHideUnderlay function方法
当底层被隐藏的时候调用onShowUnderlay function方法
当底层显示的时候调用style
可以设置控件的风格演示，该风格演示可以参考View组件的styleunderlayColor
当触摸或者点击控件的时候显示出的颜色
-
-
常见的触摸事件
注意：调用得用箭头函数
-
onPress 点击
-
onPressIn 按下
-
onPressOut 抬起
-
onLongPress 长按不放
-
二. 组件的声明周期
-
ReactNative组件的声明周期大致上可以划分为实例化阶段、存在阶段、销毁阶段，
-
最常用的为实例化阶段，该阶段就是组件的构建、展示时期，需要我们根据几个函数的调用过程，控制好组件的展示和逻辑的处理
-
实例化阶段函数功能分析
1) getDefaultProps
a. 改函数用于初始化一些默认的属性，通常会将固定的内容放在这个函数中进行赋值
b. 在组件中，可以利用this.props获取这里属性，由于组件初始化后，再次使用该组件不会调用getDefaultProps函数，所以组件自己不可以自己修改props，只可有其他组件调用它时在外部修改
c. 使用组件时，可以自定义属性，在该组件内部使用this.props.xxx获取到
2) getInitialState
a. 该函数是用于对组件的一些状态进行初始化，由于该函数不同于getDefaultProps,在以后的过程中，会再次调用，所以可以将控制控件的状态的一些变量放在这里初始化，如控件上显示的文字，可以通过this.state来获取值，通过this.setState来修改state值，比如
this.setState({
activePage: activePage,
currentX: contentOffSetX
});
b. 一旦调用了this.setState方法，组件一定会调用render方法，对组件再次进行渲染，不过，react框架会自动根据DOM的状态来判断是否需要真正的渲染
3) componentWillMount
在组件将要被加载在视图之前调用，功能相对较少
-
render
a. render是一个组件中必须有的方法，本质上是一个函数，并返回JSX或其他组件来构成DOM,和Android的XML布局类似，只能返回一个顶级元素
b. 在render函数中，只可通过this.state和this.props来访问在之前函数中初始化的数据值
-
componentDidMount
a. 在调用了render方法后，组件加载成功并被成功渲染出来以后，所要执行的后续操作，一般会在这个函数中处理网络请求等加载数据的操作
b. 因为UI已经成功被渲染出来，所以放在这个函数里进行请求操作，不会出现UI上的操作
-
存在期阶段函数功能分析
1) componentWillReceiveProps
指父元素对控件的props或state进行了修改
2) shouldComponentUpdate
一般用于优化，可以返回false或true来控制是否进行渲染
3) componentWillUpdate
组件刷新前调用，类似componentWillMount
4) componentDidUpdate
更新后的hook
-
销毁期阶段函数功能分析
- 用于清理一些无用的内容，如：点击事件Listener,只有一个过程componentWillUnmount
-
注意
-
this.props表示那些一旦定义，就不再改变的特性
-
this.state是会随着用户互动而产生变化的特性
三. 获取真实的DOM节点
-
有时需要获取真实的DOM的节点，这就要用到ref属性
<TextInput ref="myTextInput">
this.refs.myTextInput
四. ScrollView组件
-
ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置）。
-
可以帮我们做轮播图和引导页等一些可以滚动的效果
-
ScrollView中常用的属性
-
contentContainerStyle
这些样式会应用到一个内层容器上，所有的子视图都会包裹在内容容器里
-
horizontal
当次属性为true的时候，所有的子视图会在水平方向上排成一行
-
keyboardDismissMode
用户拖拽滚动视图时，是否要隐藏软键盘
none：拖拽时不隐藏软键盘
on-drag: 当拖拽开始的时候隐藏软键盘
interactive：软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘，安卓设备上不支持这个选项，会表现的和none一样
-
keyboardShouldPersistTaps
false: 在软键盘激活之后，点击焦点文本输入框意外的地方，键盘就会隐藏
true: 滚动视图不会响应点击操作，并且键盘不会自动消失，默认值为false
-
onScroll
在滚动过程中，每帧最多调用一次此回调函数，调用的频率可以用scrollEventThrottle属性来控制
-
refreshControl：element
指定RefreshControl组件，用于为ScrollView提供下拉刷新功能
-
removeClippedSubviews:
true: 当此属性为true时，屏幕之外的子视图(子视图overflow样式需要设为hidden)会被移除，这个可以提升大列表的滚动性能，默认值为true
-
showsHorizontalScrollIndicator bool
true: 显示一个水平方向的滚动条。
-
showsVerticalScrollIndicator bool
true: 显示一个垂直方向的滚动条。
-
OnMomentumScrollEnd
当一帧滚动完毕的时候调用- onScrollBeginDrag
当开始手动拖拽的时候调用- onScrollEndDrag
当结束手动拖拽的时候调用 -
五. 补充
-
DOM Diff算法
-
web界面由DOM树来构成，当其中某一部分发生变化时，其实就是对应某个DOM节点发生了变化
-
在React中，构建UI界面的思路是由当前状态决定界面，前后两个状态就是对应两套界面，然后由React来比较两个界面的区别，这就需要对DOM树进行DIff算法分析找到变化的部分，然后只更新变化的内容
-
网友评论