Реагируйте на добавление кнопки выхода из системы в компонент выдвижного ящика с отправленным действием, интегрированным с redux - PullRequest
Новая
       12

Реагируйте на добавление кнопки выхода из системы в компонент выдвижного ящика с отправленным действием, интегрированным с redux

0 голосов
/ 25 октября 2018

Я просто новичок в РН.У меня есть rout.js в моей папке конфигурации, где определены все мои pocketNavigator и stackNavigator .Выглядело это так. 

import { createStackNavigator, createDrawerNavigator, DrawerItems } from "react-navigation";


import Home from "../screens/home";
import Login from "../screens/login";
import DrawerComponent from "../components/drawer"

export const MainStack = createDrawerNavigator({
  Home: Home
}, {
  contentComponent: DrawerComponent,
  contentOptions: {
    activeTintColor: 'green'
  }
});

export const LoginStack = createStackNavigator({
  Login: {
    screen: Login
  }
});

Теперь все работает нормально в моей маршрутизации , но я хочу добавить кнопку выхода из системы в hookNavigator , который не 'Перейдите на какую-нибудь страницу.Вместо этого я хочу отправить асинхронное избыточное действие, которое вызовет функцию и вызовет запрос API.В случае успеха пользователь будет перенаправлен на LoginStack

Это мой код в hook.js , который является компонентом 

import React, { Component } from "react";
import { SafeAreaView, ScrollView, View, Image, Button } from 'react-native';
import { DrawerItems } from "react-navigation";

const DrawerComponent = (props) => (
    <SafeAreaView style={{ flex: 1 }}>
        <View style={{ height: 150, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center' }}>
            <Image source={{ uri: 'http://i.pravatar.cc/300' }}
                style={{ height: 120, width: 120, borderRadius: 60 }} />
        </View>
        <ScrollView>
            <DrawerItems {...props} />
            <Button title="LOG OUT" onPress={() => this.props.onPress()}/>
        </ScrollView>
    </SafeAreaView>
)

export default DrawerComponent

Я генерирую событие onPress prop в кнопке выхода из системы.Так будет ли rout.js обрабатывать это событие или какой-либо компонент более высокого порядка или контейнера вместо этого?

У меня уже была существующая функция выхода из асинхронного резервирования, которая работает очень хорошо.Я использовал это как показано ниже на моем home.js экране. 

<CustomButton onPress={() =>
            this.props.actions.logout(this.props.state.authSession.token)
          } title={"SIGN OUT"} />

и в моем connect 

export default connect(
  state => ({ state: state.authenticate }),
  dispatch => ({
    actions: bindActionCreators(authActions, dispatch)
  })
)(Home)

Теперь кодчто я показал в моем home.js работает нормально.Он выходит из системы и перенаправляется на loginStack , но я хочу передать его в Компонент Drawer Как мне сделать это правильно?

Основноевопрос в том, где мне обработать это onProps событие нажатия кнопки выхода из системы в DrawerComponent .Компонент более высокого уровня должен быть тем, который обрабатывает это событие до отправка действие правильно?

Теперь, поскольку я использую DrawerComponent в файле rout.js .Должен ли я подключить в этом редуксе или нет?Если нет, то где я буду обрабатывать событие.Будет лучше, если вы покажете какой-нибудь код.

Благодарим вас за помощь.Заранее спасибо.

...