aksonov / aksonov/react-native-router-flux

Integration with Redux: This navigator has both navigation and container props

オープン
#3,311 コメント 5 件 リアクション 2 件 担当者 0 名 GitHub で見る
主要言語
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 はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。