我是用户反应原生应用程序中的导航。登录后，我导航到我想要退出的主屏幕我应该导航到上一个屏幕（比如登录）。但在导航道具内部我无法找到任何登录屏幕的方法而不使用goBack功能。 我的导航有点乱，请仔细查看我的导航。
这是我的Navigators
import React from 'react';
import{ View, Text } from 'react-native';
// Navigators
import { DrawerNavigator, StackNavigator, TabNavigator } from 'react-navigation'
// Drawer Screens
import Welcome from '../../screens/Welcome';
import Profile from '../../screens/Profile';
// Tab Screens
import Home from '../../screens/Home';
import Message from '../../screens/Message';
//TabNav
const routeConfigs = {
Home: {
screen: Home,
navigationOptions: {
title: 'Home'
}
},
Message: {
screen: Message,
},
}
const tabNavigatorConfig = {
// tabBarComponent: tabBarComponent,
tabBarPosition: 'top',
lazy: true,
tabBarOptions: {
activeTintColor: 'yellow',
inactiveTintColor: 'gray',
style: {
backgroundColor: '#8e24aa',
},
activeBackgroundColor: 'green',
},
header: 'screen'
}
export const TabNav = TabNavigator(routeConfigs, tabNavigatorConfig);
//Used Stack to get Header above TabBar
export const StackNav = StackNavigator({TabNav: { screen: TabNav }});
//DrawerNav
export const DrawerNav = DrawerNavigator (
{
Welcome: { screen: Welcome},
Profile: { screen: Profile },
StackNav: { screen: StackNav}, // Stack Navigator to get Header on each Tabs
},
{
initialRouteName: 'Welcome',
drawerBackgroundColor: '#98eef3',
}
);
这是欢迎或说登录屏幕
import React, { Component } from 'react';
import { View, Text, StyleSheet, Button, TouchableOpacity, Modal, BackHandler, Alert, Image } from 'react-native';
import { connect } from 'react-redux';
import firebase from 'firebase';
import {
loginUser
} from '../actions';
import Input from '../components/Input';
import Spinner from '../components/Spinner';
class Welcome extends Component {
constructor(props){
super(props);
this.state = {
modalVisible: false,
email: '',
password: '',
}
this.renderHome = this.renderHome.bind(this);
}
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}
handleBackButton = () => {
Alert.alert(
'Exit App',
'Exiting the application?',
[
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'OK', onPress: () => BackHandler.exitApp()}
],
{ cancelable: false }
)
return true;
}
static navigationOptions = () => ({
drawerLockMode: 'locked-closed'
})
loginButtonPress() {
this.props.loginUser(this.state.email, this.state.password);
}
renderHome(){
this.props.navigation.navigate('StackNav');
}
renderLoginButton(loading){
if(loading){
return <Spinner />;
}else{
return (
<View style={{alignItems: 'center'}}>
<TouchableOpacity style={styles.button} onPress={this.loginButtonPress.bind(this)} >
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
);
}
}
render() {
return (
<View style={styles.container}>
{(this.props.user)?this.renderHome():null}
<View style={{flex: 3, justifyContent: 'center'}}>
<Input
placeholder="Email"
keyboardType="email-address"
value={this.state.email}
onChangeText={(email) => this.setState({email})}
/>
<Input
placeholder="Password"
value={this.state.password}
onChangeText={(password) => this.setState({password})}
secureTextEntry
/>
{this.renderLoginButton(this.props.loading)}
);
}
}
mapStateToProp = ({auth}) => {
return {
user: auth.user,
error: auth.error,
loading: auth.loading,
}
}
export default connect(mapStateToProp, { loginUser })(Welcome);
这是主屏幕
import React, { Component } from 'react';
import { View, Text, Button, Alert, Animated, BackHandler } from 'react-native';
import { connect } from 'react-redux';
import Header from '../components/Header';
import Ionicons from 'react-native-vector-icons/Ionicons';
export class Home extends Component {
constructor(props){
super(props);
}
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}
handleBackButton = () => {
Alert.alert(
'Exit App',
'Exiting the application?',
[
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'OK', onPress: () => BackHandler.exitApp()}
],
{ cancelable: false }
)
return true;
}
static navigationOptions = ({navigation}) =>( {
title: 'Home',
header: <Header headerTitle={navigation.state.routeName}/>,
headerTintColor: '#fff',
});
render(){
console.log(this.props.user) // after signout getting undefined
return (
<View
style={{height: 1000}}
>
<View style={{height: 1000}}>
<Text>Home</Text>
</View>
</View>
);
}
}
mapStateToProp = ({auth}) => {
return {
user: auth.user,
}
}
export default connect(mapStateToProp, null)(Home);
注销正常工作，但需要导航回欢迎/登录屏幕。
答案 0 :(得分：1)
您可以尝试goBack
Navigation.reset
import { NavigationActions } from "react-navigation";
...
export const logOut = navigation => {
NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: "Welcome" })]
})
}
答案 1 :(得分：1)
使用开关导航器-这是一个检查用户当前状态并将其转发到适当屏幕的屏幕。
更新您的导航文件中的initialRouteName并添加AuthLoadingScreen。
import React from 'react';
import{ View, Text } from 'react-native';
// Navigators
import { DrawerNavigator, StackNavigator, TabNavigator } from 'react-navigation'
// Drawer Screens
import Welcome from '../../screens/Welcome';
import Profile from '../../screens/Profile';
// Tab Screens
import Home from '../../screens/Home';
import Message from '../../screens/Message';
import AuthLoadingScreen from '../../AuthLoading';
//TabNav
const routeConfigs = {
Home: {
screen: Home,
navigationOptions: {
title: 'Home'
}
},
Message: {
screen: Message,
},
}
const tabNavigatorConfig = {
// tabBarComponent: tabBarComponent,
tabBarPosition: 'top',
lazy: true,
tabBarOptions: {
activeTintColor: 'yellow',
inactiveTintColor: 'gray',
style: {
backgroundColor: '#8e24aa',
},
activeBackgroundColor: 'green',
},
header: 'screen'
}
export const TabNav = TabNavigator(routeConfigs, tabNavigatorConfig);
//Used Stack to get Header above TabBar
export const StackNav = StackNavigator({TabNav: { screen: TabNav }});
//DrawerNav
export const DrawerNav = DrawerNavigator (
{
Welcome: { screen: Welcome},
Profile: { screen: Profile },
Authloading: {screen: AuthLoadingScreen}
StackNav: { screen: StackNav}, // Stack Navigator to get Header on each Tabs
},
{
initialRouteName: 'AuthLoading',
drawerBackgroundColor: '#98eef3',
}
);
import React, { Component } from 'react';
import PropTypes from "prop-types";
import {
ActivityIndicator,
AsyncStorage,
StatusBar,
StyleSheet,
View,
Text
} from 'react-native';
import { connect } from 'react-redux'
import { withNavigation } from 'react-navigation'
class AuthLoadingScreen extends Component {
static PropTypes = {
navigation: PropTypes.object,
isAuthenticated: PropTypes.bool
}
componentWillMount() {
this._bootstrapAsync();
}
// Fetch the token from storage then navigate to our appropriate place
_bootstrapAsync = () => {
const userToken = this.props.isAuthenticated ? 'Tabs' : 'Onboarding';
// This will switch to the App screen or Auth screen and this loading
// screen will be unmounted and thrown away
this.props.navigation.navigate(userToken);
};
// Render any loading content that you like here
render() {
return (
<View style={styles.container}>
<ActivityIndicator />
<StatusBar barStyle="default" />
<Text>hello</Text>
</View>
);
}
}
const mapStateToProps = state => {
return {
isAuthenticated: state.auth || false,
};
};
export default connect(mapStateToProps)(withNavigation(AuthLoadingScreen));
答案 2 :(得分：0)