2017-04-03 107 views
7

我學習陣營本地和終極版,我已經使用第三方庫開始 - 特別是React Navigation陣營導航Redux的國家管理

我跟着它Dan Parker's Medium Tutorial的教程,我仍然不能得到它工作

我的應用程序的RootContainer:

<PrimaryNavigation /> 
... 

export default connect(null, mapDispatchToProps)(RootContainer) 

PrimaryNavigation定義:

const mapStateToProps = (state) => { 
    return { 
    navigationState: state.primaryNav 
    } 
} 

class PrimaryNavigation extends React.Component { 
    render() { 
    return (
     <PrimaryNav 
     navigation={ 
      addNavigationHelpers({ 
      dispatch: this.props.dispatch, 
      state: this.props.navigationState 
      }) 
     } 
     /> 
    ) 
    } 
} 

export default connect(mapStateToProps)(PrimaryNavigation) 

PrimaryNav定義:

const routeConfiguration = { 
    LoginScreen: { 
    screen: LoginScreen 
    }, 
    MainContainer: { 
    screen: MainContainer 
    } 
} 

const PrimaryNav = StackNavigator(
    routeConfiguration, 
    { 
    headerMode: 'none' 
    }) 

export default PrimaryNav 

export const reducer = (state, action) => { 
    const newState = PrimaryNav.router.getStateForAction(action,state) 
    return newState || state; 
} 

我創造店:

const rootReducer = combineReducers({ 
    ... 
    primaryNav: require('../Navigation/AppNavigation').reducer 
}) 

return configureStore(rootReducer, rootSaga) 

我得到的線沿線的一個錯誤:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'PrimaryNavigation'

我的理解至今是:

  • RootContainer被連接到一個存儲 - 它保持PrimaryNavigation
  • PrimaryNavigation包含一個導航器(PrimaryNav),它包裝導航並將其傳遞狀態
  • PrimaryNav是實際的導航 - 我定義路由和缺省初始化
  • ,處理PrimaryNav減速只是PrimaryNav.router.getStateForAction

我缺少初始狀態?我沒有正確連接到Redux嗎?我是否需要啓動派遣才能進入第一個屏幕?

感謝

+0

你需要'PrimaryNav'正常嗎?它回來了'未定義',所以我猜它是一個簡單的要求你的組件失敗 – Trip

回答

1

我認爲你缺少你的代碼組織的幾件事情。

這是我努力擴展由Tyler Mcginnis完成的github notetaker app。我更新了代碼以支持最新版本的React和React Native,我還擴展了該應用以使用支持iOS和Android的react-navigation。我添加了Redux來管理商店,並使用Redux-Sagas來處理異步數據提取。

https://github.com/ahmedkamohamed/react-native-navigation-redux-sagas