React Native + Redux - onPress 调度一个动作和另一个函数

Question

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

我已经能够通过使用 Redux 更改已选择的人的状态来实现此目的。但是目前我无法确定如何分派操作并触发功能以导航到下一个屏幕。

下面是我的组件，它包含我要在其中调度操作和导航功能的事件。您可以看到第一个团队成员 'Tim' 具有导航功能。所有其他团队成员将分派他们各自的操作类型。

我是 Redux 的新手，如果有人能指出我如何将它们加在一起的正确方向，我将不胜感激。

可在此处找到存储库 - Github

    import React, {Component} from 'react';
    import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';

    const styles = StyleSheet.create({
      pane: {
        width: 300,
        height: 50,
        padding: 10,
        backgroundColor: 'lightgray',
        alignItems: 'center',
        justifyContent: 'center',
        margin: 3
      }
    });

    function navTO(passBack, location) {
        const { navigate } = passBack.props.navigation;
        navigate(location)

    }

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

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

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

Answer 1

怎么样：

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>
    );
  }
}

showTeamMember 为 onPress 创建处理函数，它调用 teamMemberCallback 和 navTo 函数。

React Native + Redux - onPress 调度一个动作和另一个函数

React Native + Redux - onPress dispatch an action and another function

react-native

redux

react-redux

react-navigation