Rctdeviceeventemitter implementing a simple observer pattern

Rctdeviceeventemitter is actually similar to the notification under iOS. The initial demo uses the user login interface and notifies the button to change the image when all input boxes are detected.

Steps to use:

Require a Rctdeviceeventemitter variable registers this event within the component that requires the task to trigger this event in the conditional component to notify the component to remove the event code as follows:

Rctdeviceeventemitter = require (' rctdeviceeventemitter ');

classStoretextinputscontentextendsreact.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)) {//All items have content, can refresh button Rctdeviceeventemitter.emit (' Updatebuttonimage ',NULL); }

}

classUpdatebuttonselectstatusextendsReact.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 '});
        Check all input boxes for valid text, if missing, remind user to enter//if (Urltext.length = = 0) {//Alert.alert (' Invalid text ', ' Please enter server address! ');
        } else if (usernametext.length = = 0) {//Alert.alert (' Invalid text ', ' Please enter user name! ');
        } else if (passwordtext.length = = 0) {//Alert.alert (' Invalid text ', ' Please enter the password! '); } else {//////Enter next View//}if(Urltextrange = = 0) {Alert.alert (' Invalid text ',' Please enter the server address! '); }else if(Usernametextrange = = 0) {Alert.alert (' Invalid text ',' Please enter user name! '); }else if(Passwordtextrange = = 0) {Alert.alert (' Invalid text ',' Please enter your password! '); }Else{//Set new state//Enter new page}} Componentdidmount () { This. Listener = Rctdeviceeventemitter.addlistener (' Updatebuttonimage ', (value) =>{ This. SetState ({pressstatus:' complete '});
    Update image}); } componentwillunmount () {//Remove be sure to write This. Listener.remove (); } render () {return(< touchableopacity Onpressin = { This. _onpressin.bind ( This)} Onpressout = { This. _onpressout.bind ( This)} activeopacity = {1} style = {Styles.loginbutton} > < Image sou Rce = { This. _updatebuttonimage ()}//this.state.pressstatus = = ' Pressin '? {uri: ' login_btn_selected '}: {uri: ' login_btn_disabled '} style = {{height:33, Borderrad Ius:5}} > < Text style = {{color:' White ', Fontsize:13, TextAlign:' Center ', Alignself:' Center ', margintop:10}}> Login </Text > </Image > </touchableopacity >)}}