aksonov / aksonov/react-native-router-flux
Integration with Redux: This navigator has both navigation and container props
- 主要言語
- JavaScript
- スター
- 8.9k
- フォーク
- 2.1k
- PR マージ指標
- 30日以内にマージされた PR はありません
説明
### Version
Tell us which versions you are using:
- react-native-router-flux v4.0.5
- react v16.3.1
- react-native v0.55.4
### Expected behaviour
Navigation should work with Redux
### Actual behaviour
**I got an error:**
Error: This navigator has both navigation and container props, so it is unclear if it should own its own state. Remove props: "onNavigationStateChange" if the navigator should get its state from the navigation prop. If the navigator should maintain its own state, do not pass a navigation prop.
This error is located at:
in NavigationContainer (at reduxify-navigator.js:63)
in NavigatorReduxWrapper (at Router.js:97)
in App (at Router.js:122)
in Router (created by Connect(Router))
in Connect(Router) (at App.js:64)
in Provider (at App.js:63)
in App (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)
### Here is my App.js content
```
import React, { Component, PureComponent } from 'react';
import { applyMiddleware, createStore, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import { Router, Scene, Actions } from 'react-native-router-flux';
import {
createReactNavigationReduxMiddleware,
reduxifyNavigator
} from 'react-navigation-redux-helpers';
import { Font } from 'expo';
import AppNavigator from './src/navigators/AppNavigator';
import appReducers from './src/reducers';
// default nav reducer
const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('home'));
const navReducer = (state = initialState, action) => {
const nextState = AppNavigator.router.getStateForAction(action, state);
console.log('nextState : ', nextState);
// Simply return the original `state` if `nextState` is null or undefined.
return nextState || state;
};
const reducers = combineReducers({
appReducers,
nav: navReducer
});
const navMiddleware = createReactNavigationReduxMiddleware('root', state => state.nav);
const ReduxNavigator = reduxifyNavigator(AppNavigator, 'root');
const mapStateToProps = state => ({
nav: state.nav,
});
const ReduxRouter = connect(mapStateToProps)(Router);
const store = createStore(reducers, composeWithDevTools(applyMiddleware(thunk, navMiddleware)));
export default class App extends PureComponent {
constructor(props) {
super(props);
this.state = { fontsLoaded: false };
}
componentDidMount() {
Font.loadAsync({
'OpenSans-Regular': require('./assets/fonts/OpenSans/OpenSans-Regular.ttf'),
'OpenSans-Semibold': require('./assets/fonts/OpenSans/OpenSans-Semibold.ttf')
}).then(() => {
this.setState({ fontsLoaded: true });
});
}
render() {
if (!this.state.fontsLoaded) {
return null;
}
return (
);
}
}
```
コントリビューションガイド
評価
この issue はまだ評価されていません。