我正在学习React Native和Redux,我开始使用第三方库 - 特别是React Navigation
我已经按照它的教程Dan Parker's Medium Tutorial,我仍然无法使它工作
我的应用程序的RootContainer:
<PrimaryNavigation />
...
export default connect(null, mapDispatchToProps)(RootContainer)
主导航定义:
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吗?我是否需要启动发送才能进入第一个屏幕?
谢谢
我认为你在代码组织中缺少一些东西。
这是我努力扩展Tyler Mcginnis完成的github notetaker应用程序。我更新了代码以支持最新版本的React和React Native,我还扩展了应用程序以使用支持iOS和Android的react-navigation。我添加了Redux来管理商店并使用Redux-Sagas来处理数据的异步提取。
https://github.com/ahmedkamohamed/react-native-navigation-redux-sagas
你可以从我的git看到完整的演示:https://github.com/liuxiaocong/redux-with-react-navigation使用redux和react-react from react-native