javascript - 反応ナビゲーションを使用して反応ネイティブでログインページからホームページに移動するには?

Question

反応ネイティブで小さなアプリをやっています。反応についてあまり知らないので、助けてください。ナビゲーションに反応しようとしています.認証されたユーザーがホームページにリダイレクトされるようにしたい.スタックナビゲーターを試してみましたが、機能していないことがわかりません.コードは次のとおりです

App.js

class App extends Component {

    render(){
     const MainNavigator = TabNavigator({
         login: { screen : LoginScreen },
         register: { screen : RegisterForm },

     )};

    return (

    <View style={{flex: 1}}>
    <MainNavigator />
    </View>

    );
}

そしてログイン画面

LoginScreen.js

  class LoginForm extends Component {
    constructor(props) {
            super(props);

            this.initialState = {
                isLoading: false,
                error: null,
                username: '',
                password: '',           
            };
            this.state = this.initialState;
        }
   componentWillMount(){            
    fetch('https://www.mywebsite.com',{
        method: 'POST',
        headers:{
                    'Content-Type' : 'application/json',
                },
                body: JSON.stringify({
                    grant_type: 'authorization_code',
                    username: this.state.username,
                    password: this.state.password,
                    client_id: 'xxxxx',
                    client_secret: 'xxxx',
                    callback_url: 'www.mywebsite.com'
                })

    })  
      .then(response => response.json())
      .then((responseData) => {

            console.log(responseData);
          })    
       .done();
        }
        render(){
            return(


                                    <Button style={styles.button} onPress={() => this.props.navigation.navigate("HomeScreen")} >
                                        <Text style={{paddingLeft:50}}>Login</Text>
                                    </Button>
                      </View>
                     </View>                 
                   </Container>

            );
        }
    }
  export default LoginForm

また、残りの画面のスタック ナビゲーションも行っています。

Route.js

import React, {Component} from 'react';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import Profile from './Profile';
import CourseListing from './CourseListing';
import Faq from './Faq';
import HomeScreen from './HomeScreen';
import CategoryDetail from './CategoryDetail';
import LoginForm from './LoginForm';
import DetailedView from './DetailedView';
import IndividualSection from './IndividualSection';
import LoginForm from './LoginForm';

const StackScreens = StackNavigator({
    LoginForm :{screen: LoginForm}
    CourseListing:{screen: CourseListing},
    Home: {screen: HomeScreen},
    CategoryDetail: {screen: CategoryDetail},
    DetailedView: {screen: DetailedView},
    IndividualSection: {screen: IndividualSection}
})

export const MyDrawer = DrawerNavigator({
   Home: {
     screen: StackScreens,
  },
  Profile: {
      screen: Profile
  },
  FAQ: {
      screen: Faq
  }
});

また、私はこのMyDrawerコンポーネントを返していますMyHome.js

MyHome.js

class MyHome extends Component {


    render(){
        return(

        <MyDrawer />
        );
    }

}
export default MyHome;

したがって、今のところ、ログイン画面と登録画面を含むApp.js戻り値が返されます。MainNavigatorまた、 wihinMyHomeの代わりに戻ると、内部画面が表示されます (スタックとして表示されません)。しかし、ログインページからホームページに移動したいので、どうすればよいですか??MainNavigatorApp.jsLoginScreenRoute.js