如何使用反应导航在 react native 中从登录页面导航到主页?

Question

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

应用.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
}
});

此外，我将在MyHome.js中返回此MyDrawer组件

我的家.js

class MyHome extends Component {

render(){
return(
<MyDrawer />
);
}
}
export default MyHome;

因此，现在在App.js它将返回包含登录和注册屏幕的MainNavigator。此外，如果我返回MyHome而不是MainNavigatorwihinApp.js它将显示内部屏幕(不LoginScreen作为Route.js中的堆栈)。但是我想从登录页面导航到主页，那么该怎么做？

Answer 1

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