React-Native: условный запуск приложения в wix/react-native-navigation — v1

Я использую wix/react-native-navigation - v1 в моем реагировать на собственный проект, и я хочу запустить свое приложение на основе следующего условия:

  • Запустить приложение
  • Чтение учетных данных из хранилища (AsyncStorage)
  • If credentials found, then
    • Start App with Home screen
  • Else
    • Start App with Login Screen

Как я могу этого добиться?

У меня есть index.js

import App from './App';

App.js

...
Navigation.registerComponent("myApp.AuthScreen", () => AuthScreen);
Navigation.registerComponent("myApp.HomeScreen", () => HomeScreen);
...

// Start a App
Navigation.startSingleScreenApp({
    screen: {
        screen: "myApp.AuthScreen",
        title: "Login"
    }
});

react-native wix-react-native-navigation
person Gagandeep Singh    schedule 17.04.2019    source источник

Ответы (3)


arrow_upward
1
arrow_downward

У вас может быть две функции, которые инициализируют одноэкранные приложения, а затем вызывают ту, которая соответствует требованиям.

...
Navigation.registerComponent("myApp.AuthScreen", () => AuthScreen);
Navigation.registerComponent("myApp.HomeScreen", () => HomeScreen);
...

function startHomeScreen() {
Navigation.startSingleScreenApp({
    screen: {
        screen: "myApp.HomeScreen",
        title: "Login"
    }
});
}

function startAuthScreen() {
Navigation.startSingleScreenApp({
    screen: {
        screen: "myApp.AuthScreen",
        title: "Home"
    }
});
}

function init() {
   if(...) {
      startAuthScreen();
   } else {
      startHomeScreen();
   }
}
person Filip Ilievski    schedule 17.04.2019
comment
Как в этом случае мы будем использовать AsyncStorage (github.com/react- родное-сообщество/реагирующее-родное-асинхронное-хранилище)? Когда я пытаюсь выполнить «AsyncStorage.getItem», который является асинхронным, приложение каким-то образом остается на пустом белом экране-заставке. - person Gagandeep Singh; 17.04.2019

arrow_upward
1
arrow_downward

Это сработало! Я не уверен, почему приложение зависало на заставке. Ниже приведен точный код:

const __init__ = () => {
    try {
        AsyncStorage.getItem("MY-KEY")
            .then((value) => {
                if (value) {
                    startHomeScreen();
                } else {
                    startAuthScreen();
                }
            });
    } catch (e) {
        startAuthScreen();
    }
};
__init__();

Спасибо, @Filip Ilievski!

person Gagandeep Singh    schedule 18.04.2019
comment
И причина, по которой заставка зависла, заключается в том, что JS является однопоточным, а основной (пользовательский интерфейс) поток RN был заблокирован, или, лучше сказать, поток JS никогда не разрешался и не отправлял информацию о том, что необходимо отобразить рядом с основным. нить. Как это произошло - ранее вы не разрешали обещание getItem(). - person Filip Ilievski; 18.04.2019

arrow_upward
0
arrow_downward 

Navigation.registerComponent("RootScreen", () => RootScreen);

Navigation.startSingleScreenApp({
    screen: {
        screen: "RootScreen",
        title: "Root"
    }
});

Для этого сценария вы можете создать один дополнительный компонент, как показано ниже. Этот дополнительный компонент проверит ваше состояние в асинхронном хранилище и решит, какое представление загрузить первым.

import AuthScreen from './AuthScreen';
import HomeScreen from './HomeScreen';

class RootScreen {
  constructor(props) {
    super(props);
    this.state = {
      loaded: false,
      screenToLoad: ''
    };
  }

  componentDidMount() {
    this.checkRoute();
  }

  checkRoute = () => {
    AsyncStorage.getItem("MY-KEY")
      .then((value) => {
        this.setState({
          loaded: true,
          screenToLoad: value
        });
      });
  }

  renderRoute = () => {
    const { screenToLoad } = this.state;
    switch(screenToLoad) {
      case 'AuthScreen':
        return <AuthScreen />;

      case 'HomeScreen':
        return <HomeScreen />

      default:
        return null;
    }
  }

  render () {
    const { loaded } = this.state;
    if (!loaded) return null;
    return this.renderRoute();
  }
}
person Vishal Raut    schedule 31.01.2020