仅当用户登录多次调用 AppRegistry.registerComponent 时才反应本机加载应用程序

Question

i have a user protected app, i want to authenticate user before loading the main app. so i was wondering is it possible to register more than one app and switch between them in runtime ?

for example i can have 3 apps 1. for login, 2. for admins, 3. for users

i register the three, and then run one of them based on condition,

AppRegistry.registerComponent('LoginApp',()=><LoginApp />);
AppRegistry.registerComponent('AdminApp',()=><AdminApp />);
AppRegistry.registerComponent('UserApp',()=><UserApp />);

i can see on https://facebook.github.io/react-native/docs/appregistry.html doc page many functions that seem useful, yet there is no documentation on how to use any of these functions :(

runApplication,unmountApplicationComponentAtRootTag seem like they can do what i want but how to implement this ?

Answer 1

You could something like this:

Register new component:

AppRegistry.registerComponent(routeName, component);

---

Unmount the component by tag:

AppRegistry.unmountApplicationComponentAtRootTag(AppRegistry.getAppKeys()?.indexOf(routeName));

---

The RootTag is the index from registered app keys.

---

Documentation:

https://reactnative.dev/docs/appregistry.html#registercomponent

Answer 2

I'm afraid I cannot help you with how AppRegistry would handle this, but I think this is not the right approach to what you are trying to achieve. I would recommend instead to have a conditional in a MainApp.js that renders the appropriate 'App' based on a certain condition (your state). For example:

class MainApp extends Component {
  constructor(){
    this.state = {type: 'login'}; // Say your login component is the default one
  }
  render() {
    switch(this.state){
         case 'login': return <LoginApp onLoginSuccessful={type => this.setState({type})}/>
         case 'admin': return <AdminApp/>
         case 'user': return <UserApp/>
   }
  }
}

Then, your index.(android|ios).js becomes simply:

AppRegistry.registerComponent('MainApp',()=>);

You can extend this approach to read the type value from AsyncStorage or any other persistent utility so that the type is permanently stored and your users do not need to log in again, but I think the example covers the basics.