更新redux状态时，React-Navigation stacknavigator重置

Question

在这里需要一些帮助，我在使用Redux和React导航时遇到了一些问题。

每当我在redux中更新状态时，React-Navigation都会重置为 InitialRoutEname 在我的 drawnavigator 中，它是 home home

在 this.props.dispatch 之后，我如何在该屏幕上留在该屏幕上？

当将redux与React-Navigation集成时，我应该做任何步骤吗？

非常感谢您的任何帮助。感谢它

app.js

这是我声明我的stacknavigator的地方 嵌套在 stacknavigator

import React, { Component } from "react";
import { connect, Provider } from "react-redux";
import { Platform, BackHandler, View, Text } from "react-native";
import { Root, StyleProvider, StatusBar } from "native-base";
import { StackNavigator, NavigationActions } from "react-navigation";
import Drawer from "./Drawer";
import AuthNavigator from "./components/login/authNavigator";
import Home from "./components/home";
import Settings from "./components/settings";
import UserProfile from "./components/userProfile";
import getTheme from "../native-base-theme/components";

const AppNavigator = token => {
    return StackNavigator(
        {
            Drawer: { screen: Drawer },
            Login: { screen: Login },
            Home: { screen: Home },
            AuthNavigator: { screen: AuthNavigator },
            UserProfile: { screen: UserProfile }
        },
        {
            initialRouteName: token ? "Drawer" : "AuthNavigator",
            stateName: "MainNav",
            headerMode: "none"
        }
    );
};
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isReady: false
        };
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({ isReady: true });
        }, 500);
    }
    render() {
        let token = null;
        const users = this.props.auth.users;
        const index = this.props.auth.defaultUserIndex;
        if (users.length > 0) {
            token = users[index].token;
        }
        const Layout = AppNavigator(token);
        return (
            <Root>
                <StyleProvider style={getTheme()}>{this.state.isReady ? <Layout /> : <View />}</StyleProvider>
            </Root>
        );
    }
}
var mapStateToProps = state => {
    return {
        auth: state.auth
    };
};
module.exports = connect(mapStateToProps)(App);

drawer.js

这是我的抽屉，每当我更新redux状态时，该应用都会弹出 到 initialRoutEname drawernavigator home

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;

reducer.js

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;
    }
}

Answer 1

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

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

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

另外：探索官方文档中的Redux集成示例