React Native 实现注销登录功能

**

React Native 实现注销登录功能

**

1. 使用Navigation导航时，注销功能实现

（1）、使用Navigation的dispatch和reset，但是局限性很大，如果注销界面和登录界面不在一个stack中，reset会有问题。（这种方法一般用在登录界面跳到主界面）。

//登录界面跳Tab界面，防止回退登录界面，当然你也可以写监听方法const resetAction = NavigationActions.reset({    index: 0,    actions: [        NavigationActions.navigate({ routeName: 'Tab' })    ]});//button处的单击事件。 <Button block light style={StyleSheet.flatten(styles.button_default)}                        onPress={() => {                            navigate('Tab');                                this.props.navigation.dispatch(resetAction);                        }                        }>                        <Text>{STRING.login}</Text> </Button>

（2）、跳转+Back键监听事件，从当前界面就做普通跳转到登录界面+登录界面加上backhandler监听事件+退出应用方法。当然这种方法，还有个问题，当从注销界面跳转到登录界面时，导航器中会出现“箭头”；

//注销界面的navigation跳转 <Button block style={StyleSheet.flatten(styles.button_default)}     onPress={() => { navigate('Login') }}><Text style={StyleSheet.flatten(styles.exittext)} >注销</Text> </Button>

//登录界面中的back键监听方法；export default class page_login extends Component {    componentDidMount() {        BackHandler.addEventListener('hardwareBackPress', function () {            BackHandler.exitApp();                        return true;              });      }    render() {

/***在注册登录界面navigation时，传入navigationoptions；navigation与navigator不   同的是*去箭头的参数为headerLeft:null;而navigator是header{Left:null}*/const navigationOptions = {    headerTitle: STRING.appname,    headerTitleStyle: {        color: 'black',        textAlign: 'center',        alignSelf: 'center',    },    headerLeft:null}const MOOCNavigator = StackNavigator({    Login: { screen: LoginPage, navigationOptions: navigationOptions },    Tab: { screen: TabNavigator, navigationOptions: { header: null } },}, {    });export default MOOCNavigator;

2. 使用Navigator导航，注销功能实现

如果我们是用Navigator实现的导航，则可以借助于onDidFocus和immediatelyResetRouteStack两个方法实现。

刚学RN，瞎捣鼓，功能虽然实现了，也许有更好的办法。。，如果哪位大神，有更好的方法，还望跟大家分享下。