Question

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

我已经能够通过使用Redux来改变被选中者的状态来实现这一目标。但是目前我无法确定如何调度操作并触发导航到下一个屏幕的功能。

下面是我的组件，其中包含我想要分派操作和导航功能的事件。你可以看到第一个团队成员＆＃39; Tim＆＃39;具有导航功能。所有其他团队成员将分派他们各自的行动类型。

我对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调度动作和另一个函数

1 个答案: