反応ナビゲーションStackNavigatorリセット時にRedux状態

Question

ここで何か助けが必要です。反応ナビゲーションでreduxを使用するときに問題があります。

私はReduxの状態を更新するたびに、反応ナビゲーションiは後、その画面上this.props.dispatch滞在することができますどのようにホーム

である私のDrawerNavigatorにinitialRouteNameにリセットされますRedux状態を更新しますか？

私はreduxを反応ナビゲーションと統合するときにすべきことはありますか？

ありがとうございました。感謝それ

App.js

私は私の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 StackNavigator

にネストされている私 DrawerNavigator、あります

これは私がReduxの状態を更新するたびに、アプリがバック ホーム

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

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

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