React-Native EventEmitter

react-native组件通信的方式一般都是通过props传递来实现的,但是state到props的change难以避免组件re-render。

因为react-native的TextInput在ios设备上存在着value使用state值就会影响中文输入的问题,所以只能找到避免组件重复re-render,而且又要能把内部输入通知给外部。

于是找到了EventEmitter这个library,它的原理和vue的emit-on差不多,就是使用起来稍微麻烦一点。

第一步:引入EventEmitter,同时实例化。

image.png

第二步:内部暴露emit事件。

image.png

第三步:把EventEmiter实例暴露给外部,外部通过该实例来监听Changed事件。

外部component:

image.png

image.png

内部input:

image.png

现在当input changeText的时候外部的可以收到通知并且获取text了,当需要命令式改变input的value时可以通过操作inputRef来强制更新。

tip:当需要监听多个emit的情况下,注意emit暴露的事件名得不相同。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容