美文网首页
React Native通知传值特殊场景的使用

React Native通知传值特殊场景的使用

作者: 陈长见 | 来源:发表于2017-12-15 09:46 被阅读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))
        }
    
    如果你有更好的思路,欢迎交流

    相关文章

      网友评论

          本文标题:React Native通知传值特殊场景的使用

          本文链接:https://www.haomeiwen.com/subject/zzjrwxtx.html