我已经使用Facebook SDK创建了一个登录按钮。用户登录后,应用程序将导航到第二个屏幕(NavigatorIOS)。从第二个屏幕开始,用户可以使用导航(后退按钮)返回登录屏幕。
如果用户已经登录,如何阻止用户返回“登录”界面?
index.ios.js
import React, { Component } from 'react'
import {
AppRegistry,
StyleSheet,
NavigatorIOS
} from 'react-native'
import LoginView from './src/login-view'
class MyApp extends Component {
render() {
return (
<Provider store={store}>
<NavigatorIOS
initialRoute={{
component: LoginView,
title: 'MyApp',
index: 0
}}
/>
</Provider>
);
}
}
AppRegistry.registerComponent('MyApp', () => MyApp);
LoginView
import React, {Component} from 'react'
import {
View,
Text,
StyleSheet,
TouchableHighlight,
} from 'react-native'
import CategoryView from './category-view'
import {LoginButton, AccessToken, GraphRequest, GraphRequestManager} from 'react-native-fbsdk'
class LoginView extends Component {
goToCategoryView = () =>
this.props.navigator.push({
title: 'Categories',
component: CategoryView,
})
render(){
return(
<View style={styles.container}>
<LoginButton
readPermissions={['public_profile','email']}
onLoginFinished={
(error, result) => {
if (error) {
console.log('login has error: ', result.error)
} else if (result.isCancelled) {
console.log('login is cancelled.')
} else {
AccessToken.getCurrentAccessToken().then((data) => {
this.goToCategoryView()
})
}
}
}
onLogoutFinished={() => {console.log('logged out')}} />
</View>
)
}
}
export default LoginView
答案 0 :(得分:2)
使用Navigator,您可以使用resetTo(startingRoute)
方法重置堆栈,并从您作为参数过去的路径开始新的堆栈。这样做可以防止在堆栈中导航回来。
如果我没有误解你的组件,你应该使用这样的东西:
goToCategoryView = () => {
//Replace here push with resetTo
this.props.navigator.resetTo({
title: 'Categories',
component: CategoryView,
})
}
答案 1 :(得分:0)
首先关闭pop()登录屏幕,然后按()新屏幕或尝试替换()? [https://facebook.github.io/react-native/docs/navigator.html]
还有一点,您应该在登录屏幕上进行检查,看看用户是否已登录并显示退出而不是登录。 (如果使用redux来存储用户令牌,则可以检查令牌是否存在且仍然有效)
答案 2 :(得分:0)
就像您说的那样:“关于该主题的最后一个问题-用户登录后,如果我刷新模拟器,它将返回登录屏幕,显示Facebook继续按钮。是否有可能防止刷新时返回该屏幕/ reload?”
如果您使用的是基于令牌的身份验证,则通过 AsyncStorage.setItem(“ jwtToken”,token)将用户令牌存储在 AsyncStorage 中,然后使用 AsyncStorage进行检查.getItem('jwtToken')(如果存在令牌)将用户重定向到主屏幕,否则将登录屏幕
// Fetch the token from storage then navigate to our appropriate place
const userToken = await AsyncStorage.getItem('jwtToken');
//set auth token header auth
setAuthToken(userToken);
// // decode token and get user and experire
const decoded = jwt_decode(userToken);
// set user and isAuthenticated
// this will help you to login as current user
store.dispatch(setCurrentUser(decoded));
// This will switch to the App screen or Auth screen and this loading
//check if token is there or not
if (userToken === null) {
//else logout to login page
Actions.login()
console.log(userToken)
} else {
//if token then redirect to main screen
Actions.main()
console.log(userToken)
}
答案 3 :(得分:0)
.flex-1 {
display: flex;
flex-direction: row;
}
.flex-2 {
display: inline-flex;
flex-direction: column;
}
这是从2020年8月28日开始,并对导航5做出反应,
您可以在此处了解更多信息=> https://reactnavigation.org/docs/navigation-prop/#reset