React-native 知识点-this.bind-返回键-React.cloneElement-控件显示隐藏-ScrollView

前端之家收集整理的这篇文章主要介绍了React-native 知识点-this.bind-返回键-React.cloneElement-控件显示隐藏-ScrollView前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1 图片作为listview的每个item的背景,如下图,如何宽度全屏;如何给图片加蒙层

宽度全屏:
使用Dimensions获取屏幕的宽度,高度设为宽度的百分比即可(下面是Image标签的stytle)

蒙层:
有一个不透明属性opacity,但是对图片本身并不好用,主要用在View上
所以我采用的是如下方式:(切记,作为蒙层背景的view的宽高要和Image标签的一样)
把opacity属性用在作为蒙层的view上,并且要配合position属性使用,如下:

2.this.bind问题:
如果在调用方法时报错“null is not an object”,一般这种错不是参数传递错误就是绑定this的问题
这里主要说绑定this,如下几种绑定:
1.this.onPageScroll.bind(this)
2.()=>this.onPageScroll()
3.在构造函数中一次性绑定,据说这种绑定可以解决第一种绑定产生的隐患,
至于什么隐患大家自行了 解:
this.onPageScroll= this.onPageScroll.bind(this);
绑定this建议大家使用第二种或者第三种!!

3.返回键的监听!
这个知识点现在回头来看,属于基础性问题,但是自己还是折腾了半天!所以还是贴出来:
需要在生命周期函数中监听componentWillMount,或者componentDidMount

有些地方说要注销这个事件,但是我没注销没感觉到有啥影响,不放心的同学在如下声明周期函数调用

4.关于React.cloneElement参数问题
该问题是自己捣鼓第三方”react-native-viewpager“插件所遇到的(虽然最后放弃使用)
第三方“react-native-viewpager”中有默认的指示器,想模仿写一个,但是不知道props参数怎么取:
如下图是viewpager中源码:(log自己加的)

使用:

然后问题就来了!自定义的的DouNiuInderictor中没有拿到数据
问题解决如下:

props参数肯定传过来了,只是被View标签包裹后,被View给截取了!!!
现在的问题是:如果我必需加View标签包裹标签呢???
谁知道怎么从上一级获取props吗??希望知道怎么解决的同学,及时回复!如果我自己解决了,会及时更新该篇博客

5.整个View控件包裹的区域都可以作为事件点击区域
该问题也属于基础性问题!!!View标签包裹Image和Text!!如果想把onPress事件放在View上,但是点击无效果,那么将View标签 替换为TouchableOpacity标签!该组件用于封装视图,使其可以正确响应触摸操作:
如果不想有点击颜色变换,请使用activeOpacity属性(以多少不透明度显示,一般是0到1之间)

6.如何控制一个组件的显示隐藏:
单纯的显示隐藏可以使用opacity足够了,但是如果想隐藏之后不占据该位置,如下使用(即改变state的值或者参数值来控制)

7.ScrollView高度问题
官方说必须给ScrollView指定一个高度,但是不建议设置具体数值!!那么如何做?如下方式也可

原文链接:https://www.f2er.com/react/307128.html

猜你在找的React相关文章