RCTDeviceEventEmitter 实现简单的观察者模式

来源：互联网发布：关于现代武器的软件编辑：程序博客网时间：2024/05/21 22:47

RCTDeviceEventEmitter 实际上和类似于ios下的notification。初期demo使用的场景在于用户登录界面，当侦测到所有的输入框都有内容后就通知button来更改image。

使用步骤：

require一个 RCTDeviceEventEmitter 变量
在需要执行任务的组件内注册这个事件
在条件成立的组件内触发这个事件通知
组件移除方法中一定要移除这个事件
代码如下：
var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
class StoreTextInputsContent extends React.Component {    _storeURLText(text) {        urlText = text;        console.log('url is ', urlText);    }    _storeUsernameText(text) {        usernameText = text;        console.log('username is ', usernameText);    }    _storePasswordText(text) {        passwordText = text;        console.log('password is ', passwordText);    }    _textChange() {        console.log('onChange called ');    }    _onURLSelectionChange(range) {        urlTextRange = range;        console.log('url range changed and range is ', urlTextRange);    }    _onUserNameSelectionChange(range) {        usernameTextRange = range;        console.log('username range changed and range is ', usernameTextRange);    }    _onPasswordSelectionChange(range) {        passwordTextRange = range;        console.log('password range changed and range is ', passwordTextRange);        if((urlTextRange != 0) && (usernameTextRange != 0) && (passwordTextRange != 0)) {            //所有的项目都有了内容,可以刷新button了            RCTDeviceEventEmitter.emit('updateButtonImage', null);    }}




class UpdateButtonSelectStatus extends React.Component {    constructor(props) {        super(props);        this.state = {pressStatus: 'normal'};    }    _onPressIn() {        this.setState({pressStatus: 'pressin'});    }    _updateButtonImage() {        if (this.state.pressStatus == 'normal'){            return {uri: 'login_btn_disabled'};        } else if(this.state.pressStatus == 'pressin'){            return {uri: 'login_btn_selected'};        } else {            return {uri: 'login_btn_normal'};        }    }    _onPressOut() {        this.setState({pressStatus: 'normal'});        //检查所有输入框是否有有效的文字,如果缺失就提醒用户输入        // if (urlText.length == 0) {        // Alert.alert('无效文本', '请输入服务器地址!');        // } else if (usernameText.length == 0) {        //     Alert.alert('无效文本', '请输入用户名!');        //        // } else if (passwordText.length == 0) {        //     Alert.alert('无效文本', '请输入密码!');        //        // } else {        //     //进入下一个view        // }        if (urlTextRange == 0) {            Alert.alert('无效文本', '请输入服务器地址!');        } else if(usernameTextRange == 0) {            Alert.alert('无效文本', '请输入用户名!');        } else if(passwordTextRange == 0) {            Alert.alert('无效文本', '请输入密码!');        } else {            //设置新的state            //进入新的页面        }    }    componentDidMount(){        this.listener = RCTDeviceEventEmitter.addListener('updateButtonImage',(value)=>{        this.setState({pressStatus: 'complete'});        //update image            });    }    componentWillUnmount(){        // 移除 一定要写        this.listener.remove();    }    render() {        return (            < TouchableOpacity        onPressIn = {this._onPressIn.bind(this)    }        onPressOut = {this._onPressOut.bind(this)    }        activeOpacity = {1}        style = {styles.loginButton    }    >    <        Image        source = {this._updateButtonImage()}        //this.state.pressStatus == 'pressin' ? {uri: 'login_btn_selected'} : {uri: 'login_btn_disabled'}        style = {        {            height: 33, borderRadius        :            5        }    } >    <        Text        style = {        {            color: 'white', fontSize        :            13, textAlign        :            'center', alignSelf        :            'center', marginTop        :            10        }    }>        登录        < / Text >        < / Image >        < / TouchableOpacity >    )    }}

0 0