Question

我是RN的新手。我的配置文件夹中有一个 routes.js ，其中定义了所有我的 drawerNavigator 和 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
  }
});

现在我的路线导航中一切正常，但是我想在 drawerNavigator 中添加一个无法导航到某些页面的注销按钮。相反，我想调度一个异步redux动作，该动作将调用该函数并调用一个API请求。如果成功，则用户将被重定向到 LoginStack

这是我在 drawer.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道具事件。那么 routes.js 会处理该事件还是一些更高阶的容器组件？

我已经有一个现成的异步redux注销功能，该功能运行良好。我在 home.js 屏幕中使用了以下代码。

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

并在我的连接

中

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

现在，我在 home.js 中显示的代码可以正常工作。它注销了用户并重定向到 loginStack ，但是我想在 Drawer Component （抽屉组件）中进行传输？

主要问题是我应该如何处理 DrawerComponent 中注销按钮的onProps 新闻事件。 更高级别的组件应该是处理该事件以发送一个操作权的组件？

现在，因为我正在使用 routes.js 文件中的 DrawerComponent 。我应该在那连接redux吗？如果没有，我将在哪里处理。如果您可以显示一些代码，那会更好。

感谢有人可以帮助您。预先感谢。

React native将注销按钮添加到抽屉组件中，并且调度动作与redux集成在一起

0 个答案: