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))
    }
如果你有更好的思路,欢迎交流
上一篇下一篇

猜你喜欢

热点阅读