React-Native：在 wix/react-native-navigation - v1 中启动条件应用程序

Question

我在我的 react native 项目中使用wix/react-native-navigation - v1，我想根据以下条件启动我的应用程序：

• 启动应用程序
• 从存储中读取凭据 (AsyncStorage)
• 如果找到凭据，则
  • 使用主屏幕启动应用程序
• 其他
  • 使用登录屏幕启动应用程序

我怎样才能做到这一点？

我有 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"
    }
});

Answer 1

你可以有两个函数来初始化单屏应用，然后调用满足要求的那个。

...
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();
   }
}

Answer 2

成功了！我不确定为什么该应用程序一直挂在启动画面上。以下是具体代码：

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

感谢@Filip Ilievski！

Answer 3

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();
  }
}