Question

在这里需要一些帮助，我在使用带有反应导航的redux时遇到了一些问题。

每当我在redux中更新状态时，react-navigation将重置为 DrawerNavigator 中的 initialRouteName ，这是主页

如何在 this.props.dispatch 之后停留在该屏幕上以更新Redux状态？

将redux与react-navigation集成时，我应该采取哪些措施？

非常感谢您的帮助。欣赏它

App.js

这是我宣布我的StackNavigator的地方，我的 DrawerNavigator 是嵌套在 StackNavigator
中

import React from "react";
import { DrawerNavigator, StackNavigator } from "react-navigation";
import { Dimensions } from "react-native";
import SideBar from "./components/sidebar";

import Home from "./components/home/";
import Settings from "./components/settings/";

const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;

const Drawer = DrawerNavigator(
    {
        Home: { screen: Home },
        Settings: { screen: Settings },
        CompanyProfile: { screen: CompanyProfile }
    },
    {
        initialRouteName: "Home",
        contentOptions: {
            activeTintColor: "#e91e63"
        },
        contentComponent: props => <SideBar {...props} />,
        drawerWidth: deviceWidth - 100
    }
);

export default Drawer;

Drawer.js

这是我的抽屉，每当我更新Redux状态时，应用程序都会弹出到 Home
的DrawerNavigator的 initialRouteName

const defaultState = {
    users: [],
    defaultUserIndex: 0
};

const defaultUserState = {
    phoneNumber: undefined,
    email: undefined,
    name: undefined,
    userId: undefined,
    token: undefined,
    avatar: undefined
};

module.exports = (state = defaultState, action) => {
    console.log("reducer state: ", state);
    switch (action.type) {
        case "AUTH_USER":
        case "UNAUTH_USER":
        case "UPDATE_AVATAR":
        case "UPDATE_PHONENUMBER":
        case "UPDATE_PERSONALDETAILS":
            return { ...state, users: user(state.defaultUserIndex, state.users, action) };

        case "CLEAR_STATE":
            return defaultState;
        default:
            return state;
    }
};

function user(defaultUserIndex, state = [], action) {
    const newState = [...state];
    switch (action.type) {
        case "AUTH_USER":
            return [
                ...state,
                {
                    phoneNumber: action.phoneNumber,
                    name: action.name,
                    email: action.email,
                    userId: action.userId,
                    token: action.token,
                    avatar: action.avatar,
                }
            ];

        case "UNAUTH_USER":
            return state.filter(item => item.token !== action.token);

        case "UPDATE_AVATAR":
            newState[defaultUserIndex].avatar = action.avatar;
            return newState;

        case "UPDATE_PERSONALDETAILS":
            newState[defaultUserIndex].name = action.name;
            newState[defaultUserIndex].email = action.email;
            return newState;
        default:
            return state;
    }
}

Reducer.js

{{1}}

Answer 1

在您的情况下：您在每个渲染调用上创建新的AppNavigator。每个实例都有新的导航状态。

您可以通过将初始化移动到构造函数来修复它，因此每下一次渲染它将使用相同的对象。

constructor(props) {
    super(props);

    this.state = {
        isReady: false
    };
    const token = //sometihng
    this.navigator =  AppNavigator(token)
}

另外：在官方文档https://github.com/react-community/react-navigation/blob/master/docs/guides/Redux-Integration.md

中探索redux集成的示例

更新Redux状态时，react-navigation StackNavigator会重置

1 个答案: