条件ベースでコンポーネントをレンダリング/ナビゲートする方法

Question

値がtrueの場合、AsyncStorageからキーの値を取得するindex.android.jsがあり、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" 
    } 
); 

誰が/レンダリング条件ごとにコンポーネントを移動する方法を知っていますか？

Answer 1

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

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

そして、あなたのスプラッシュ画面コンポーネントで：

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