1

我正在做一个反应原生的小应用程序。我对反应不太了解，所以请帮忙。我正在尝试反应导航。我希望经过身份验证的用户被重定向到主页。不知道我已经尝试使用堆栈导航器但没有工作。以下是代码

应用程序.js

class App extends Component {

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

     )};

    return (

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

    );
}

和登录屏幕

登录屏幕.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

我也在为其余的屏幕做堆栈导航。

路由.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

我的主页.js

class MyHome extends Component {


    render(){
        return(

        <MyDrawer />
        );
    }

}
export default MyHome;

所以现在App.js它会返回MainNavigator包含登录和注册屏幕。另外，如果我返回MyHome而不是MainNavigator返回App.js，它将显示内部屏幕（不提供LoginScreen堆栈Route.js）。但是我想从登录页面导航到主页，那么该怎么做呢？

4

1 回答 1

1

是的，我找到了一个解决方案。我使用嵌套导航器完成了这个。MainNavigator在App.js内部定义Route.js。现在我可以从登录屏幕导航到主屏幕

于 2018-02-05T09:56:00.707 回答