转载:http://blog.csdn.net/pz789as/article/details/52537028
我们在项目里面,经常会用的批次渲染,比如一个列表渲染很多个item,或者一个横排或者竖排同时渲染多个数据。
例如:
这样写,RN都会报一个警告,需要你对每个item添加一个key,在Text里添加一个属性key:
copy
转载:http://blog.csdn.net/pz789as/article/details/52537028
我们在项目里面,经常会用的批次渲染,比如一个列表渲染很多个item,或者一个横排或者竖排同时渲染多个数据。
例如:
copy
但是这个key有什么作用呢?我们在代码后面加一个console.log输出一下看看结果:
copy
看到key和那个props了吗,我们可在未渲染之前,根据要求再次更改array里面<Text>的属性。我们现在来改一改试试看!
然后我们在for之后这么改看看结果如何:
copy
结果我们可以看到,中间那个key等于2的已经改变了哦。
既然这样,那我们继续改一下,把这个arr改为这个组件的一个属性:
copy
另外加一个state变量,用于刷新render(为什么这么做,是RN的刷新机制,需要调用this.setState才会调用,所以弄了一个bln值,而不是把arr放在state里面
然后在绑定还按钮回调中这样做:
copy
点击之前:
点击之后:
哈哈,都变了哦!!不过这样做有点延时。其实改变渲染之后的东西,在学习RN之后会有一个专门的参数可供使用,就是每个组件的自带属性ref,在上面的截图我们也看到了,现在ref是null,因为没有设置,如果要使用需要这样做:
copy
不过这个ref有个缺点,它必须要在render之后才会产生,也就是一开始初始化后,使用this.refs.text0 会报错,这点一定要弄清楚哦!
bind
renderAllButtons(){ var allBtns = []; titles=['拍照','视频','开机','照明'] for(var i=0 ;i<4;i++){ let title = titles[i]; allBtns.push( <View key={i} style={styles.autoViewStyle}> <TouchableOpacity style={styles.buttonStyle} onPress={this._pressBtn.bind(this,i)}> <Text style={styles.textsStyle}>{title}</Text> </TouchableOpacity> </View> ); }
_pressBtn(i){ console.log(i) }原文链接:https://www.f2er.com/react/305373.html