React native - запретить пользователю возвращаться на экран входа

Я создал кнопку входа, используя 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
Источник

2 ответа

Решение

Используя Навигатор, вы можете использовать resetTo(startingRoute) метод для сброса стека и запуска нового из маршрута, который вы прошли в качестве параметра. Делая это, вы не сможете вернуться обратно в стек.

Если я не неправильно понимаю ваш компонент, вы должны использовать что-то вроде этого:

goToCategoryView = () => {
    //Replace here push with resetTo
    this.props.navigator.resetTo({
        title: 'Categories',
        component: CategoryView,
    })
}

Документы Facebook

Источник

Как вы сказали: "Последний вопрос по теме: если пользователь вошел в систему, если я обновлю симулятор, он вернется к экрану входа в систему с кнопкой" Продолжить "в Facebook. Можно ли также предотвратить возврат к этому экрану при обновлении / перезагрузке?"

Если вы используете авторизацию на основе токена, сохраните токен пользователя в AsyncStorage с помощью AsyncStorage.setItem("jwtToken", token), затем проверьте его с помощью 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)

}
Источник

Как насчет pop() сначала отключить экран входа в систему, затем нажать () новый экран или попробовать заменить ()? [ https://facebook.github.io/react-native/docs/navigator.html]

Еще одна вещь, вы должны проверить на экране входа в систему, чтобы увидеть, если пользователь вошел в систему и показать выход вместо входа. (Если вы используете redux для хранения токена пользователя, вы можете проверить, существует ли токен и остается ли он действительным)

Источник 
navigation.reset({
  index: 0,
  routes: [{ name: 'SCREEN_NAME' }],
});

Это по состоянию на 28 августа 2020 г., и React Navigation 5,

Подробнее об этом можно прочитать здесь => https://reactnavigation.org/docs/navigation-prop/

Источник
Другие вопросы по тегам