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。此外，如果我返回MyHome而不是MainNavigator，则App.js将显示内部屏幕（不会将LoginScreen作为Route.js中的堆栈。）但我想要从登录页面导航到主页，以便如何做到？

Answer 1

是的，我找到了一个解决方案。我使用MainNavigator中App.js内的嵌套navigator.Defined Route.js完成此操作。现在我可以从登录屏幕导航到主屏幕

如何使用反应导航在本地反应中从登录页面导航到主页？

1 个答案: