React native 从mapDispatchToProps分派后导航到新组件

通过单击英语或法语按钮设置应用程序的语言后，我需要导航到下一个屏幕。如何在

发送后直接调用
this.props.navigation.navigate（'HomeScreen'）

我试着把这两个函数都放进一个函数中，然后从
onPress
调用它，但都不起作用

LanguageScreen.js

<Button
 title="English"
 onPress={this.props.english}
 />
 <Button
 title="Français"
 onPress={this.props.french}
 />

import React, { Component } from 'react';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';
import LanguageScreen from '../screens/LanguageScreen.js';

const mapStateToProps = (state, props) => ({
  language: state.language
})

const mapDispatchToProps = (dispatch) => ({
  french: () => {
    dispatch({ type: 'FRENCH' });
  },
  english: () => {
    dispatch({ type: 'ENGLISH' });
  },
})

export default connect(mapStateToProps, mapDispatchToProps)(LanguageScreen)

import { createStore } from 'redux'

export const language = (state = 'english', action) => {
  switch (action.type) {
  case 'FRENCH':
    return 'french';
  case 'ENGLISH':
    return 'english';
  default:
    return state;
  }
}

let store = createStore(language);

export default store;

store.js

<Button
 title="English"
 onPress={this.props.english}
 />
 <Button
 title="Français"
 onPress={this.props.french}
 />

import React, { Component } from 'react';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';
import LanguageScreen from '../screens/LanguageScreen.js';

const mapStateToProps = (state, props) => ({
  language: state.language
})

const mapDispatchToProps = (dispatch) => ({
  french: () => {
    dispatch({ type: 'FRENCH' });
  },
  english: () => {
    dispatch({ type: 'ENGLISH' });
  },
})

export default connect(mapStateToProps, mapDispatchToProps)(LanguageScreen)

import { createStore } from 'redux'

export const language = (state = 'english', action) => {
  switch (action.type) {
  case 'FRENCH':
    return 'french';
  case 'ENGLISH':
    return 'english';
  default:
    return state;
  }
}

let store = createStore(language);

export default store;

mapDispatchToProps
接受
ownProps
作为第二个参数，因此假设您的组件接收
navigate
prop，您可以尝试以下操作：

const mapDispatchToProps = (dispatch, ownProps) => ({
  french: () => {
    dispatch({ type: 'FRENCH' });
    ownProps.navigation.navigate('HomeScreen');
  },
  english: () => {
    dispatch({ type: 'ENGLISH' });
    ownProps.navigation.navigate('HomeScreen');
  },
}

mapDispatchToProps
接受
ownProps
作为第二个参数，因此假设您的组件接收
navigate
prop，您可以尝试以下操作：

const mapDispatchToProps = (dispatch, ownProps) => ({
  french: () => {
    dispatch({ type: 'FRENCH' });
    ownProps.navigation.navigate('HomeScreen');
  },
  english: () => {
    dispatch({ type: 'ENGLISH' });
    ownProps.navigation.navigate('HomeScreen');
  },
}

我试过了，但没用。除了您所显示的内容之外，我还需要做任何更改吗？您能否演示如何在应用程序中使用
LanguageContainer
组件？您确定此组件接收到
导航
属性吗？有什么错误吗？我试过了，但没用。除了您所显示的内容之外，我还需要做任何更改吗？您能否演示如何在应用程序中使用
LanguageContainer
组件？您确定此组件接收到
导航
属性吗？有什么错误吗？