如何在入职屏幕后启动标签导航？

Question

我有以下问题： 我目前正在开发一个带有本机反应的应用程序。 我使用＆＃39; react-navigation＆＃39;用于导航。现在我想设置一个Onboarding Screen，它只在我应用程序的第一次启动时显示。 此屏幕应以全屏格式显示，导航栏和标签栏应该不可见。 我已经使用AsyncStorage实现了逻辑，对于屏幕本身我使用了＃react-native-app-intro-slider＆＃39;。 但是我怎样才能将它设置为初始屏幕？在初始启动屏幕后，我能够在我的第一个选项卡中显示它，但随后也会显示标签栏。 我可以隐藏标签栏，但在完成入职设置/屏幕后，我希望标签栏再次可见。

有没有办法让屏幕全屏显示，并在完成新手入门后导航到标签导航器？

我很反应本机和javascript一般，对不起，如果这个问题是不确定的。 应用

App.js：

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button,
  ScrollView,
  Statusbar
} from 'react-native';
import { SafeAreaView, TabNavigator, StackNavigator } from 'react-navigation';
import Home from './Tabs/Home';
import Wheel from './Tabs/Wheel';
import Categories from './Tabs/Categories';
import Settings from './Tabs/Settings';
import TabBar from './Tabs/TabBar';
import StrafenScreen from './screens/StrafenScreen';
import VideoScreen from './screens/VideoScreen';
import UberUns from './screens/UberUns';
import Rechtliches from './screens/Rechtliches';
import SprachAuswahl from './screens/Sprachauswahl';
import RandomVideoScreen from './screens/RandomVideoScreen';
import Onboarding from './screens/Onboarding.js';



export const FeedStack = StackNavigator({
  Category: {
    screen: Categories,
    navigationOptions: {
      title: 'Kategorien',
    },
  },

  Strafen: {
    screen: StrafenScreen,
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.key} `,
    }),
  },

  Videos: {
    screen: VideoScreen,
    navigationOptions: ({ navigation }) => ({
      tabBarVisible: (navigation.state.params && navigation.state.params.hideTabBar) === true,
      title: `${navigation.state.params.key} `,
    }),
  },
});

export const WheelStack = StackNavigator({
  Wheel: {
    screen: Wheel,
    navigationOptions: {
      title: 'Glücksrad',
    },
  },

  RandomVideo: {
    screen: RandomVideoScreen,
    navigationOptions: ({ navigation }) => ({
      tabBarVisible: (navigation.state.params && navigation.state.params.hideTabBar) === true,
      animationEnabled: true
    }),
  },

  Onboarding: {
    screen: Onboarding,
    navigationOptions: ({ navigation }) => ({
      tabBarVisible: (navigation.state.params && navigation.state.params.hideTabBar) === true,
      animationEnabled: true
    }),
  },

});

export const SettingsStack = StackNavigator({
  Settings: {
    screen: Settings,
    navigationOptions: {
      title: 'Über uns',
    },
  },

  UberUns: {
    screen: UberUns,
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.key} `,
    }),
  },

  SprachAuswahl: {
    screen: SprachAuswahl,
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.key} `,
    }),
  },

  Rechtliches: {
    screen: Rechtliches,
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.key} `,
    }),
  },

});

const MainScreenNavigator = TabNavigator({
  Home: {screen: Home},
  Kategorien: {screen: FeedStack},
  Rad: {screen: WheelStack},
  Einstellungen: {screen: SettingsStack}

},

 {
  swipeEnabled:true,
    tabBarOptions: {
      activeTintColor: 'white',
      activeBackgroundColor: 'darkgrey',
      inactiveTintColor: 'black',
      inactiveBackgroundColor: 'grey',
      labelStyle: {
        fontSize: 11,
        padding: 0
      }
    }
});

MainScreenNavigator.navigationsOptions = {
  title: 'Demo'
};

StackNavigator.navigationOptions = {
  headerStyle: {
    borderBottomWidth: 0,
}
};

export default MainScreenNavigator;

我的第一个标签：

import React from 'react';
import {
        Text,
        View,
        Button,
        Image,
        TouchableHighlight,
        TouchableOpacity,
        AsyncStorage
        } from 'react-native';
import WelcomeScreen from '../screens/WelcomeScreen.js';
import Onboarding from '../screens/Onboarding.js';
import checkIfFirstLaunch from '../components/checkLaunch';

export default class Home extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: ({tintColor}) => (
      <Image
        source={require('../images/home.png')}
        style={{width: 22, height: 22, tintColor: 'white'}}>

      </Image>
    )
  }
  constructor(props) {
     super(props);

     this.state = {
       isFirstLaunch: false,
       hasCheckedAsyncStorage: false,
     };
   }

   async componentWillMount() {
     const isFirstLaunch = await checkIfFirstLaunch();
     this.setState({ isFirstLaunch, hasCheckedAsyncStorage: true });
   }

  render() {
    const { hasCheckedAsyncStorage, isFirstLaunch } = this.state;
    const { navigate } = this.props.navigation;

    if (!hasCheckedAsyncStorage) {
          return null;
        }

        return isFirstLaunch ?
              <Onboarding /> :
              <View style={styles.container}>
                <TouchableOpacity
                  style={{ flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center', }}
                  onPress={
                      () => navigate('Kategorien', {})
                          }
                  >



                  <Image
                    style={{ width: 230, height: 230, borderWidth: 3, marginTop: 30}}
                    source={require('../images/final-course-categories.jpg')}
                    >
                  </Image>
                </TouchableOpacity>

                <TouchableOpacity
                  style={{ flex: 1,

                  alignItems: 'center',
                  justifyContent: 'center', }}
                  onPress={
                      () => navigate('Rad', {})
                          }
                  >
                  <Image
                    style={{ width: 230, height: 230, borderWidth: 3}}
                    source={require('../images/fortuneWheel.png')}
                    >
                  </Image>
                </TouchableOpacity>
              </View>
            ;
  }
}

const styles = {
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },

  buttonContainer: {
    flex: 1
  }
};

入职组件：

import React from 'react';
import { StyleSheet } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';

const styles = StyleSheet.create({
  image: {
    width: 100,
    height: 100,
  }
});

const slides = [
  {
    key: 'somethun',
    title: 'Achtung',
    text: 'Die Strafen in dieser App sind nur als Spaß gedacht.\nBitte nicht ernst nehmen.',
    image: require('../images/warning.png'),
    imageStyle: styles.image,
    backgroundColor: '#59b2ab',
  },
  {
    key: 'somethun-do',
    title: 'Title 2',
    text: 'Other cool stuff',

    backgroundColor: '#febe29',
  },
  {
    key: 'somethun1',
    title: 'Rocket guy',
    text: 'Lorem ipsum',
    image: require('../images/home.png'),
    imageStyle: styles.image,
    backgroundColor: '#22bcb5',
  }
];

export default class App extends React.Component {
  _onDone = () => {


  }

  static navigatorStyle = {
  navBarHidden: true
};
  render() {
    return (
      <AppIntroSlider
        slides={slides}
        onDone={this._onDone}
      />
    );
  }
}

我怎么能告诉我的应用程序哪个屏幕应该用作初始屏幕？ 感谢。