React Native通知传值特殊场景的使用
2017-12-15 本文已影响57人
陈长见
RN与iOS还是有些差异性, 本人经历的一个情况是:在系统方法中无法调用自定义方法
代码如下:
_renderItem(item){
if (item.section.key == 's3'){
if (item.item.key == 0){
return(
<View style={[styles.LastCellStyleView, {flexDirection: 'row-reverse',
alignItems: 'center'}]}>
{item.item.rightView}
<TextInput ref='textinput' style={styles.TextInputView}
onChangeText={(text)=>{
this.addRow();
}}
/>
</View>
)
}
}
addRow(txt){
this.setState({
data:2
})
}
场景是在cell中有一个TextInput, 要在内容改变后就增动态增加一行,结果发现代码中在SectionList中的_renderItem方法中, 无法调用addRow()自定义方法, 并且会报错:
_this4.addRow is not a function
经过修改, 发现及时使用常规的bind.this 方式也并不能解决, 因为此时_renderItem 是SectionList自动调用的方法,并不是当前类调用的, 所以此时this并不是指向当前类 无论你怎样绑定,他都是指向SectionLIst 而SectionLIst并不含有自定义addRow方法,所以才会报错
那怎样才能将值传出去呢, 后来想到了用通知的方法
所以, this.addRow
这里改为DeviceEventEmitter.emit('changeRMB',text)
而我们知道组件的生命周期, 在Render 方法调用后才会调用componentDidMount(){ }
所以我们在这里进行通知的接收,并且调用addRow方法:
componentDidMount() {
DeviceEventEmitter.addListener('changeRMB',this.addRow.bind(this))
}