Question

我刚开始一个新项目，目前正在将Redux-Saga与React-Navigation集成。这是我使用的版本：

    "react": "16.6.1",
    "react-native": "0.57.5",
    "react-navigation": "^1.5.11",
    "react-navigation-redux-helpers": "^1.0.5",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-saga": "^1.0.1",
    "reduxsauce": "^1.0.1",

这是我的主文件和导航器文件：

export default class Root extends React.Component {
  props: Props;

  renderApp() {


    const store = createStore(rootReducer, applyMiddleware(logger, middleware));

    return (
      <Provider store={store}>
        <Navigator/>
      </Provider>
    );
  }

  render() {
      return this.renderApp();
  }
}
AppRegistry.registerComponent('Root', () => Root);

/ ************************* /

export const Navigator = new StackNavigator({
  Main: {
    screen: MainScreen
  },
  Tutorial:{
    screen: TutorialScreen
  }
},
{
  initialRouteName: 'Main',
  mode:'modal'
});

export const middleware = createReactNavigationReduxMiddleware(
  "root",
  state => state.navigation,
);

const addListener = createReduxBoundAddListener("root");

class Nav extends React.Component {
  render() {

    return (
      <Navigator 
      navigation={addNavigationHelpers({
        dispatch: this.props.dispatch,
        state: this.props.navigation,
        addListener
    })} />
    )
  }
}

const mapStateToProps = (navigation) => ({
  navigation,
});

const mapDispatchToProps = dispatch => ({
  dispatch
});

export default connect(mapStateToProps, mapDispatchToProps)(Nav)

当我在主文件上为Button分配了一个导航动作navigate: (routeName, params = {}) => dispatch(Actions.navigate(routeName, params))时，可以正确调用该动作。

但是视图不会“导航”并停留在第一个视图上。看起来正确设置了redux，但是导航操作管理不善。但我无法找到此问题的确切原因。任何想法可能来自何处？

我的容器文件：

type Props = {
      user?: Object,
      navigate: (routeName: string, params?: Object) => void,
    };

class MainScreen extends React.Component {
  render() {
    const {user, navigate}= this.props;
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Button title="mainScreen" onPress={()=> navigate("Tutorial",{})} >
        </Button>
      </View>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  navigate: (routeName, params = {}) => dispatch(Actions.navigate(routeName, params))
});

const mapStateToProps = (state) => {
    const { user } = state
    return { user }
  };

export default connect(mapStateToProps, mapDispatchToProps)(MainScreen);

Answer 1

每次渲染组件时都在重新创建商店。

const store = createStore(rootReducer, applyMiddleware(logger, middleware));

export default class Root extends React.Component {
  props: Props;

  renderApp() {


    return (
      <Provider store={store}>
        <Navigator/>
      </Provider>
    );
  }

  render() {
      return this.renderApp();
  }
}

Redux操作已触发，但无法导航（React-Navigation）

1 个答案: