从反应本机组件调用javascript函数

Question

Actually I am new to react native, I am calling a javascript function which is in singleton class. I want to call this function from another react native component from constructor.But if I try to call, it is not calling that function.

Code:

export default class CustomScreen extends React.Component {
   constructor(){
    LoginUtil.getInstance().getLoginToken() // ==> not working
   }
}
 export default class LoginUtil {

    static instance = null;
    static createInstance() {
        var object = new LoginUtil();
        return object;
    }

    static getInstance () {
        if (!LoginUtil.instance) {
            LoginUtil.instance = LoginUtil.createInstance();
        }
        return LoginUtil.instance;
    }

     getLoginToken(){
        return "token"
    }
  }

Answer 1

The way singleton pattern is done in JavaScript is by leveraging exports

Like this:

// LoginUtils.js

class LoginUtil {
   
   constructor() {
    // Only called once
     this.token = 'initial';
   }


    setLoginToken(token) {
       this.token = token;
    }

     getLoginToken(){
        return this.token;
    }
  }

export default new LoginUtil();

The trick is while exporting the instance, it will handle single instance and avoid writing boilerplate code for instantiating.

Then in your component file do as follow:

import loginUtils from './LoginUtils';

export default class CustomScreen extends React.Component {
   constructor(){
    const token = loginUtils.getLoginToken()
   }
}

EDIT:

The reason your may not work is because you need to add super() in your component constructor as first statement:

class CustomScreen extends React.Component {
   constructor(){
    super();
    LoginUtil.getInstance().getLoginToken();

   }
   ...
  }

 class CustomScreen extends React.Component { constructor(){ super() this.state = { token: LoginUtil.getInstance().getLoginToken() }; } render() { return <p>Token: {this.state.token}</p> } } class LoginUtil { static instance = null; static createInstance() { var object = new LoginUtil(); return object; } static getInstance () { if (!LoginUtil.instance) { LoginUtil.instance = LoginUtil.createInstance(); } return LoginUtil.instance; } getLoginToken(){ return "token-test" } } ReactDOM.render(<CustomScreen />, document.getElementById('root'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

Instead of exporting class from the singleton file, export its object like:

export default new LoginUtil()

Then import this object and call any function of that class