如何 render/navigate 基于条件的组件

Question

我有 index.android.js，我从 AsyncStorage 获取键的值，如果值为真，那么我想导航到 DashboardScreen，否则 StackNav。

index.android.js

/**
 * @flow
 */

import React, { Component } from "react";
import { AppRegistry } from "react-native";
import { StackNav } from "./router";
export default class ScheduledApp extends Component {
  render() {

    const { navigate } = this.props.navigation;

    try {
      AsyncStorage.getItem("@ProductTour:key").then(value => {
        // control goes inside if when user has completed product tour
        if (value) {
          navigate("DashboardScreen");
        }
      });
    } catch (error) {
      console.log(error);
    }
    return <StackNav />;
  }
}

AppRegistry.registerComponent("Scheduled", () => ScheduledApp);

router.js

import { StackNavigator } from "react-navigation";

import SplashScreen from "./ui/SplashScreen";
import EnableNotificationScreen from "./ui/EnableNotificationScreen";
import CreateMessageScreen from "./ui/CreateMessageScreen";
import DashboardScreen from "./ui/DashboardScreen";
import CreateSMS from "./ui/CreateSMS";

export const StackNav = StackNavigator(
  {
    Splash: {
      screen: SplashScreen,
      navigationOptions: {
        header: null
      }
    },
    EnableNotification: {
      screen: EnableNotificationScreen,
      navigationOptions: {
        header: null
      }
    },
    CreateMessage: {
      screen: CreateMessageScreen,
      navigationOptions: {
        header: null
      }
    },
    DashboardScreen: {
      screen: DashboardScreen,
      navigationOptions: {
        headerLeft: null,
        headerTitleStyle: { alignSelf: "center" }
      }
    },
    CreateSMS: {
      screen: CreateSMS
    }
  },
  {
    initialRouteName: "Splash"
  }
);

有谁知道如何 render/navigate 基于条件的组件？

Answer 1

export default class ScheduledApp extends Component {
  render() {            
    return <StackNav />;
  }
}

AppRegistry.registerComponent("Scheduled", () => ScheduledApp);

然后在您的 SplashScreen 组件中：

export default class ScheduledApp extends Component {
  render() {

    const { navigate } = this.props.navigation;

    try {
      AsyncStorage.getItem("@ProductTour:key").then(value => {
        // control goes inside if when user has completed product tour
        if (value) {
          navigate("DashboardScreen");
        }
      });
    } catch (error) {
      console.log(error);
    }
    return <Text>Return whatever you are already returning in the SplashScreen render function</Text>;
  }
}