React native 反应本机+；Redux-onPress分派一个操作和另一个函数

我有一个团队成员列表，onPress将使用react navigation/StackNavigator导航到下一个屏幕。根据单击的团队成员，下一个屏幕将动态加载相关团队成员信息

我已经能够通过使用Redux来改变被选中者的状态来实现这一点。然而，目前我还不知道如何调度操作并触发函数导航到下一个屏幕

下面是我的组件，它保存了我希望在其中分派操作和导航功能的事件。您可以看到第一个团队成员“Tim”具有导航功能。所有其他团队成员将分派各自的动作类型

我是Redux的新手，如果有人能为我指出如何将这些添加到一起的正确方向，我将不胜感激

可在此处找到存储库-

import React，{Component}来自'React'；
从“react native”导入{样式表、视图、文本、TouchableOpacity}；
const styles=StyleSheet.create({
窗格：{
宽度：300，
身高：50，
填充：10，
背景颜色：“浅灰色”，
对齐项目：“居中”，
为内容辩护：“中心”，
保证金：3
}
});
导航功能（回传、位置）{
const{navigate}=passBack.props.navigation；
导航（位置）
}
导出默认类TeamList扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
const{passBack，location，whoSelected，Tim，Kate，Ian，Smita，Lee，Ben}=this.props；
返回(
{whoSelected}
navTO（passBack，location）}style={styles.pane}>
提姆
凯特
伊恩
斯米塔
李
本
);
}
}

像这样的东西怎么样：

export default class TeamList extends Component {
  constructor(props) {
    super(props);

    this.showTeamMember = this.showTeamMember.bind(this)
  }

  showTeamMember(teamMemberCallback) {
    const { passBack, location } = this.props;

    return () => {
      teamMemberCallback();
      navTO(passBack, location);
    }
  }

  render() {
    const { Tim, Kate, Ian, Smita, Lee, Ben } = this.props;

    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>{whoSelected}</Text>
        <TouchableOpacity onPress={this.showTeamMember(Tim)} style={styles.pane}>
          <Text>Tim</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.showTeamMember(Kate)} style={styles.pane}>
          <Text>Kate</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.showTeamMember(Ian)} style={styles.pane}>
          <Text>Ian</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.showTeamMember(Smita)} style={styles.pane}>
          <Text>Smita</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.showTeamMember(Lee)} style={styles.pane}>
          <Text>Lee</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.showTeamMember(Ben)} style={styles.pane}>
          <Text>Ben</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

导出默认类团队列表扩展组件{
建造师（道具）{
超级（道具）；
this.showTeamMember=this.showTeamMember.bind（this）
}
showTeamMember（teamMemberCallback）{
const{passBack，location}=this.props；
return（）=>{
teamMemberCallback（）；
navTO（回传，位置）；
}
}
render（）{
const{Tim，Kate，Ian，Smita，Lee，Ben}=this.props；
返回(
{whoSelected}
提姆
凯特
伊恩
斯米塔
李
本
);
}
}

---

showTeamMember

为调用

teamMemberCallback

和

navTo

函数的

onPress

创建处理程序函数。

类似于：

export default class TeamList extends Component {
  constructor(props) {
    super(props);

    this.showTeamMember = this.showTeamMember.bind(this)
  }

  showTeamMember(teamMemberCallback) {
    const { passBack, location } = this.props;

    return () => {
      teamMemberCallback();
      navTO(passBack, location);
    }
  }

  render() {
    const { Tim, Kate, Ian, Smita, Lee, Ben } = this.props;

    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>{whoSelected}</Text>
        <TouchableOpacity onPress={this.showTeamMember(Tim)} style={styles.pane}>
          <Text>Tim</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.showTeamMember(Kate)} style={styles.pane}>
          <Text>Kate</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.showTeamMember(Ian)} style={styles.pane}>
          <Text>Ian</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.showTeamMember(Smita)} style={styles.pane}>
          <Text>Smita</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.showTeamMember(Lee)} style={styles.pane}>
          <Text>Lee</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.showTeamMember(Ben)} style={styles.pane}>
          <Text>Ben</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

导出默认类团队列表扩展组件{
建造师（道具）{
超级（道具）；
this.showTeamMember=this.showTeamMember.bind（this）
}
showTeamMember（teamMemberCallback）{
const{passBack，location}=this.props；
return（）=>{
teamMemberCallback（）；
navTO（回传，位置）；
}
}
render（）{
const{Tim，Kate，Ian，Smita，Lee，Ben}=this.props；
返回(
{whoSelected}
提姆
凯特
伊恩
斯米塔
李
本
);
}
}

---

showTeamMember

为

onPress

创建处理函数，该函数同时调用

teamMemberCallback

和

navTo

函数。

基本上，您只需在导航代码中添加调度操作的代码即可。虽然我想你知道这一点，但我不明白你的问题。尽量简化你不能做的事情的底线如果是这样的话，基本上你可以在

onPress

中添加发送操作的代码以及导航代码。虽然我想你知道这一点，但我不明白你的问题。在这种情况下，尽量简化你不能做的事情的底线