我正在学习React Native和Redux,并且我开始使用第三方库 - 特别是React Navigation
我已经按照它上面的教程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'
到目前为止,我的理解是:
我错过了初始状态吗?我没有正确地将它连接到Redux吗?我是否需要启动调度才能转到第一个屏幕?
由于
答案 0 :(得分:1)
我认为您在代码组织中缺少一些东西。
这是我努力扩展由Tyler Mcginnis完成的github notetaker应用程序。我更新了代码以支持最新版本的React和React Native,我还扩展了应用程序以使用支持iOS和Android的react-navigation。我添加了Redux来管理商店并使用Redux-Sagas来处理数据的异步提取。
https://github.com/ahmedkamohamed/react-native-navigation-redux-sagas
答案 1 :(得分:0)
你可以从我的git看到完整的演示:https://github.com/liuxiaocong/redux-with-react-navigation 使用来自react-native的redux和react-navigation